.invisible
{
	
	display:none !important;
	
}


#remote
{
	
	position: fixed;
	
	padding:5px;
	
	top: 0px;
	
	right: 5px;
	
	width:150px;
	
	border:0px solid silver;
	
	background:transparent;
	
	color:red;
	
	font-size:40px;
	
	cursor: pointer;
	
	z-index: 10000;
	
	
}
		
		
#radio_listener
{
	position:relative;
	
	width:100%;
	
	
	height:100%;
	
	
	
}	



#radiotransistor_adplayer
{
	
	display:none !important;
	
}				

#radiotransistor_vid_adplayer
{
	
	display:none !important;
	
}	


#listenbtn
{
	
	position:fixed;
	
	top:0px;
	
	left:0px;
	
	cursor:pointer;
	
	background:seagreen;
	
	color:white;
	
	z-index:2000;
	
	border:0px solid tranparent;
	
	
	font-size:30px;
	
	
	font-weight:bold;
	
	
	
}
			

@media screen and (min-width: 771px) {

		body{
	
	
	}
	
	#ecran
	{
		position: relative;
		
		
	}
	
	button.catalogue
	{
		position: relative;
		
		background:transparent;
		
		font-size:25px;
		
		color:beige;
		
		cursor:pointer;
		
		border:0px solid silver;
		
		
		 
	}
	
	
	#menubar
	{
		position:fixed;
		top:0px;
		left:0px;
		width:100%;
		min-height:30px;
		z-index:1;
		background:#efefef;
		box-shadow:0px 0px 2px 1px #888888;
		
		display: none;
		
	}
	
	#menubar:hover
	{
		background:rgba(30,144,255,1);
		box-shadow:0px 0px 2px 1px #888888;
	}
	
	
	#general
	{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
	
	}
	
	#main
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:black;
	
	}
	
	
	
	#previous:hover
	{
		opacity: 1;
	}
	
	#previous
	{
		font-weight: bold;
		
		position:fixed;
		top:calc(50% - 60px);
		left:0px;
		
		min-height:30px;
		z-index:1000;
		background:#efefef;
		color: #595959;
		box-shadow:0px 0px 2px 1px #888888;
		font-size: 40px;
		padding: 5px;
		
		cursor: pointer;
		
		opacity: 0.0;
	
		animation-name: show;
		animation-duration: 1s;
		
		
	}
	
	
	
	
	#next:hover
	{
		
		opacity: 1.0;
	}
	
	
	
	
	#next
	{
		font-weight: bold;
		
		position:fixed;
		top:calc(50% - 60px);;
		right:0px;
		
		cursor: pointer;
		min-height:30px;
		z-index:1000;
		background:#efefef;
		color: #595959;
		box-shadow:0px 0px 2px 1px #888888;
		font-size: 40px;
		padding: 5px;
		
		opacity: 0.0;
		
		animation-name: show;
		animation-duration: 1s;
		
	}
	
	
	.page
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:smoke;
		
	
	}
	
	.half
	{
		position:relative;
		width:50%;
	}
	
	
	.fullheight
	{
		height:100%;
	}
	
	.third
	{
		position:relative;
		width:33%;
	}
	
	
	.quarter
	{
		position:relative;
		width:25%;
	}
	
	
	.abox
	{
		display:inline-block;
	}
	
	.top
	{
		vertical-align:top;
	}
	
	.middle
	{
		vertical-align:middle !important;
	}
	
	.half
	{
		position: relative;
		
		width: 50%;
		
	}
	
	label.catalogue
	{
		position: relative;
		
		padding:5px;
	}
	
	button.catalogue
	{
		position: relative;
		
		margin:10px;
	}
	
	.catalogue_header_half
	{
		position: relative;
		
		display: inline-block;
		
	}
	
	.bottom
	{
		vertical-align:bottom;
	}
	
	.left
	{
		text-align:left;
	}
	
	.right
	{
		text-align:right;
	}
	
	.center
	{
		text-align: center !important;
	}
	
	#tvscreen
	{
		position: relative;
		
		width: 100%;
		
		height: 100%;
		
		
	
	}
	
	
	
	
	.septa:hover
	{
		box-shadow: 0px 0px 2px 1px #efefef;
		
	}
	
	.septa
	{
		position: relative;
		
		width:calc((100% / 7));
		
		display: inline-block;
		
		height: 100%;
		
		box-shadow: 0px 0px 2px 1px rgba(255,255,255,0.3);
	
	}
	
	div.date_name
	{
		position: relative;
		
		color: #efefef;
		
		font-weight: bold;
		
		box-shadow: 0px 0px 2px 1px #efefef;
		
	}
						
	div.date_content
	{
		position: relative;
	
		height: calc(100: - 30px);
			
	}
	
	div.date_line_empty_not
	{
		position: relative;
		
		padding: 5px;
		
		min-height: 50px;
	}
	
	div.date_line
	{
		position: relative;
		
		padding: 5px;
		
		
	}
	
	button.tv
	{
		position: relative;
		
		width: 100%;
		
	}
	
	
	label.time
	{
		position: absolute;
		
		top: 0px;
		
		left: 0px;
		
		color: black;
		
		padding:0px;
		
		background: rgba(255,255,255,0.6);
		
		font-size: 12px;
	}
	
	
	label.duration
	{
		position: absolute;
		
		bottom: 0px;
		
		right: 0px;
		
		color: black;
		
		padding:0px;
		
		background: rgba(255,255,255,0.6);
		
		font-size: 12px;
	}
	
	
	#addbox
	{
		position: fixed;
		
		bottom: 0px;
		
		right: 0px;
		
		min-width: 200px;
		
		min-height: 400px;
		
		
		
		color: black;
		
		padding:0px;
		
		background: rgba(255,255,255,1);
		
		box-shadow: 0px 0px 2px 1px #888888;
		
		font-size: 12px;
		
		z-index: 1200;
		
	}
	
	#addheader
	{
		position: relative;
		
		padding:5px;
		
	}			
	
	button.some
	{
		position: relative;
		
		
		margin:5px  0px 5px 5px;
		
		display: inline-block;
		
		font-size: 20px;
		
		background:transparent;
		
		
		color: beige;
		
		
		
	}
	
	
	
	#catalogue_header:hover
	{
		opacity: 1.0;
	}
	
	#catalogue_header
	{
		position: absolute;
		
		width: 100%;
		
	
		z-index:1000; 
		
		background:rgba(0,0,0,0.8);
		
		
		box-shadow: 0px 0px 2px 1px #888888;
		
		opacity: 0.7;
	
	}
	
	label.catalogue
	{
		position: relative;
	
		color:beige;
			
		font-size: 30px;
		
		
	}
	
	#catalogue_content
	{
		position: relative;
		
			
	}
	
	div.avideo_header
	{
		position: absolute;
		
		right: 0px;
			
		text-align: right;
		
		
		z-index: 3;
		
	}
	
	div.avideo_content
	{
		position: relative;
	}
	
	div.avideo:hover
	{
	
			box-shadow: 0px 0px 2px 1px tomato;
	}
	
	
	div.avideo
	{
		position: relative;
		
		display: inline-block;
		
		
		width: 200px;
		
		box-shadow: 0px 0px 2px 1px #595959;
			
		height: 200px;
	}
	
	
	
	
	div.avideo_content
	{
		position: absolute;
		
		
		z-index: 1;
		
		width: 100%;
		
		height: 100%;
		
		
		
	}
	
	
	img.avideo
	{
		position: relative;
		
		max-height: 100%;
		
		max-width: 100%;
		
	
	}
								
	
	div.avideo_info:hover
	{
			opacity: 1;
	}
	
	
	div.avideo_info
	{
	
		position: absolute;
		
		top: 0px;
		
		right: 0px;
		
			
		width: 100%;
		
		height: 100%;
		
		z-index: 7;
	
		color: white;	
		
		opacity: 0;
		
		animation-name: show;
		
		animation-duration: 2s;
		
			
	}
	
	
	
	div.avideo_duration
	{
		position: relative;
	
	}
	
	
	label.video_info
	{
		position: relative;
		
		
	
	}
	
	div.avideo_description
	{
		position: relative;
		
		text-align: center;	
		
	}
	
	p.avideo_description
	{
		position: relative;
		
		
		font-size: 12px;
		
		
	}
	
	div.avideo_duration
	{
		position: relative;
	
	}
	
	
	label.avideo_title
	{
		position: relative;
		
		font-weight: bold;
	
	}
	
	div.avideo_title
	{
		position: relative;
		
		
		padding: 5px 10px;
	}
	
	
	
	
	
	
	
	.selected
	{
	
		box-shadow: 0px 0px 2px 1px orange;
		
	}
	
	#catalogue_main
	{
		position: relative;
		
		width: 90%;
		
		height: 90%;
		
		margin-right: auto;
	
		margin-left: auto;
		
		top:5%;
		
		box-shadow: 0px 0px 2px 1px #efefef;
		
		background:black;
	}
	
	
	
	#catalogue
	{
		position:fixed;
		
		top: 0px;
		
		left: 0px;
		
		
		z-index: 1200;
		
		
		width: 100%;
		
		height: 100%;
		
		
		
	}
	
	#catalogue_content
	{
		position: relative;
		
		height: 100%;
		
	}
	
	button.amedia
	{
		position: relative;
		
		background:dodgerblue;
		
		color: white;
		
		border:0px solid silver;
	
		border-radius: 5px ;
		
		font-size: 15px;
		
		
			
		
	}
	
	
	button.amedia
	{
		position: relative;
		
		background:dodgerblue;
		
		color: white;
		
		border:0px solid silver;
	
		border-radius: 5px ;
		
		font-size: 15px;
		
		
			
		
	}
	
	
	
	#ajouterbtn:hover
	{
		box-shadow:0px 0px 2px 1px #888888;
	}
	
	
	#ajouterbtn
	{
		position:fixed;
	
		bottom:5px;
	
		left:5px;
		
		z-index:1000;
		
		background:#efefef;
		
		color: black;
		
		font-size: 40px;
		
		border-radius: 100%;
		
		padding:5px 10px;
	
		box-shadow:0px 0px 2px 1px transparent;
		
		
		
	}
	
	button.amedia_view
	{
		
		position: relative;
		
		background:crimson;
		
		color: white;
		
		border:0px solid silver;
	
		border-radius: 5px ;
		
		font-size: 15px;
		
		
			
	
	
	}
	
	div.avideo_line
	{
		position: relative;
		
		padding:5px;
		
	}
	
	#catalogue_videos
	{
		position: relative;
		
		height: 50%;
		
	}  
}




/* Tablet **/
@media screen and (max-width: 770px) and (min-width: 361px) {
	
		body{
	
	
	}
	
	#ecran
	{
		position: relative;
		
		
	}
	
	button.catalogue
	{
		position: relative;
		
		background:transparent;
		
		font-size:25px;
		
		color:beige;
		
		cursor:pointer;
		
		border:0px solid silver;
		
		
		 
	}
	
	
	#menubar
	{
		position:fixed;
		top:0px;
		left:0px;
		width:100%;
		min-height:30px;
		z-index:1;
		background:#efefef;
		box-shadow:0px 0px 2px 1px #888888;
		
		display: none;
		
	}
	
	#menubar:hover
	{
		background:rgba(30,144,255,1);
		box-shadow:0px 0px 2px 1px #888888;
	}
	
	
	#general
	{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
	
	}
	
	#main
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:black;
	
	}
	
	
	
	#previous:hover
	{
		opacity: 1;
	}
	
	#previous
	{
		font-weight: bold;
		
		position:fixed;
		top:calc(50% - 60px);
		left:0px;
		
		min-height:30px;
		z-index:1000;
		background:#efefef;
		color: #595959;
		box-shadow:0px 0px 2px 1px #888888;
		font-size: 40px;
		padding: 5px;
		
		cursor: pointer;
		
		opacity: 0.0;
	
		animation-name: show;
		animation-duration: 1s;
		
		
	}
	
	
	
	
	#next:hover
	{
		
		opacity: 1.0;
	}
	
	
	
	
	#next
	{
		font-weight: bold;
		
		position:fixed;
		top:calc(50% - 60px);;
		right:0px;
		
		cursor: pointer;
		min-height:30px;
		z-index:1000;
		background:#efefef;
		color: #595959;
		box-shadow:0px 0px 2px 1px #888888;
		font-size: 40px;
		padding: 5px;
		
		opacity: 0.0;
		
		animation-name: show;
		animation-duration: 1s;
		
	}
	
	
	.page
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:smoke;
		
	
	}
	
	.half
	{
		position:relative;
		width:50%;
	}
	
	
	.fullheight
	{
		height:100%;
	}
	
	.third
	{
		position:relative;
		width:33%;
	}
	
	
	.quarter
	{
		position:relative;
		width:25%;
	}
	
	
	.abox
	{
		display:inline-block;
	}
	
	.top
	{
		vertical-align:top;
	}
	
	.middle
	{
		vertical-align:middle !important;
	}
	
	.half
	{
		position: relative;
		
		width: 50%;
		
	}
	
	label.catalogue
	{
		position: relative;
		
		padding:5px;
	}
	
	button.catalogue
	{
		position: relative;
		
		margin:10px;
	}
	
	.catalogue_header_half
	{
		position: relative;
		
		display: inline-block;
		
	}
	
	.bottom
	{
		vertical-align:bottom;
	}
	
	.left
	{
		text-align:left;
	}
	
	.right
	{
		text-align:right;
	}
	
	.center
	{
		text-align: center !important;
	}
	
	#tvscreen
	{
		position: relative;
		
		width: 100%;
		
		height: 100%;
		
		
	
	}
	
	
	
	
	.septa:hover
	{
		box-shadow: 0px 0px 2px 1px #efefef;
		
	}
	
	.septa
	{
		position: relative;
		
		width:calc((100% / 7));
		
		display: inline-block;
		
		height: 100%;
		
		box-shadow: 0px 0px 2px 1px rgba(255,255,255,0.3);
	
	}
	
	div.date_name
	{
		position: relative;
		
		color: #efefef;
		
		font-weight: bold;
		
		box-shadow: 0px 0px 2px 1px #efefef;
		
	}
						
	div.date_content
	{
		position: relative;
	
		height: calc(100: - 30px);
			
	}
	
	div.date_line_empty_not
	{
		position: relative;
		
		padding: 5px;
		
		min-height: 50px;
	}
	
	div.date_line
	{
		position: relative;
		
		padding: 5px;
		
		
	}
	
	button.tv
	{
		position: relative;
		
		width: 100%;
		
	}
	
	
	label.time
	{
		position: absolute;
		
		top: 0px;
		
		left: 0px;
		
		color: black;
		
		padding:0px;
		
		background: rgba(255,255,255,0.6);
		
		font-size: 12px;
	}
	
	
	label.duration
	{
		position: absolute;
		
		bottom: 0px;
		
		right: 0px;
		
		color: black;
		
		padding:0px;
		
		background: rgba(255,255,255,0.6);
		
		font-size: 12px;
	}
	
	
	#addbox
	{
		position: fixed;
		
		bottom: 0px;
		
		right: 0px;
		
		min-width: 200px;
		
		min-height: 400px;
		
		
		
		color: black;
		
		padding:0px;
		
		background: rgba(255,255,255,1);
		
		box-shadow: 0px 0px 2px 1px #888888;
		
		font-size: 12px;
		
		z-index: 1200;
		
	}
	
	#addheader
	{
		position: relative;
		
		padding:5px;
		
	}			
	
	button.some
	{
		position: relative;
		
		
		margin:5px  0px 5px 5px;
		
		display: inline-block;
		
		font-size: 20px;
		
		background:transparent;
		
		
		color: beige;
		
		
		
	}
	
	
	
	#catalogue_header:hover
	{
		opacity: 1.0;
	}
	
	#catalogue_header
	{
		position: absolute;
		
		width: 100%;
		
	
		z-index:1000; 
		
		background:rgba(0,0,0,0.8);
		
		
		box-shadow: 0px 0px 2px 1px #888888;
		
		opacity: 0.7;
	
	}
	
	label.catalogue
	{
		position: relative;
	
		color:beige;
			
		font-size: 30px;
		
		
	}
	
	#catalogue_content
	{
		position: relative;
		
			
	}
	
	div.avideo_header
	{
		position: absolute;
		
		right: 0px;
			
		text-align: right;
		
		
		z-index: 3;
		
	}
	
	div.avideo_content
	{
		position: relative;
	}
	
	div.avideo:hover
	{
	
			box-shadow: 0px 0px 2px 1px tomato;
	}
	
	
	div.avideo
	{
		position: relative;
		
		display: inline-block;
		
		
		width: 200px;
		
		box-shadow: 0px 0px 2px 1px #595959;
			
		height: 200px;
	}
	
	
	
	
	div.avideo_content
	{
		position: absolute;
		
		
		z-index: 1;
		
		width: 100%;
		
		height: 100%;
		
		
		
	}
	
	
	img.avideo
	{
		position: relative;
		
		max-height: 100%;
		
		max-width: 100%;
		
	
	}
								
	
	div.avideo_info:hover
	{
			opacity: 1;
	}
	
	
	div.avideo_info
	{
	
		position: absolute;
		
		top: 0px;
		
		right: 0px;
		
			
		width: 100%;
		
		height: 100%;
		
		z-index: 7;
	
		color: white;	
		
		opacity: 0;
		
		animation-name: show;
		
		animation-duration: 2s;
		
			
	}
	
	
	
	div.avideo_duration
	{
		position: relative;
	
	}
	
	
	label.video_info
	{
		position: relative;
		
		
	
	}
	
	div.avideo_description
	{
		position: relative;
		
		text-align: center;	
		
	}
	
	p.avideo_description
	{
		position: relative;
		
		
		font-size: 12px;
		
		
	}
	
	div.avideo_duration
	{
		position: relative;
	
	}
	
	
	label.avideo_title
	{
		position: relative;
		
		font-weight: bold;
	
	}
	
	div.avideo_title
	{
		position: relative;
		
		
		padding: 5px 10px;
	}
	
	
	
	
	
	
	
	.selected
	{
	
		box-shadow: 0px 0px 2px 1px orange;
		
	}
	
	#catalogue_main
	{
		position: relative;
		
		width: 90%;
		
		height: 90%;
		
		margin-right: auto;
	
		margin-left: auto;
		
		top:5%;
		
		box-shadow: 0px 0px 2px 1px #efefef;
		
		background:black;
	}
	
	
	
	#catalogue
	{
		position:fixed;
		
		top: 0px;
		
		left: 0px;
		
		
		z-index: 1200;
		
		
		width: 100%;
		
		height: 100%;
		
		
		
	}
	
	#catalogue_content
	{
		position: relative;
		
		height: 100%;
		
	}
	
	button.amedia
	{
		position: relative;
		
		background:dodgerblue;
		
		color: white;
		
		border:0px solid silver;
	
		border-radius: 5px ;
		
		font-size: 15px;
		
		
			
		
	}
	
	
	button.amedia
	{
		position: relative;
		
		background:dodgerblue;
		
		color: white;
		
		border:0px solid silver;
	
		border-radius: 5px ;
		
		font-size: 15px;
		
		
			
		
	}
	
	
	
	#ajouterbtn:hover
	{
		box-shadow:0px 0px 2px 1px #888888;
	}
	
	
	#ajouterbtn
	{
		position:fixed;
	
		bottom:5px;
	
		left:5px;
		
		z-index:1000;
		
		background:#efefef;
		
		color: black;
		
		font-size: 40px;
		
		border-radius: 100%;
		
		padding:5px 10px;
	
		box-shadow:0px 0px 2px 1px transparent;
		
		
		
	}
	
	button.amedia_view
	{
		
		position: relative;
		
		background:crimson;
		
		color: white;
		
		border:0px solid silver;
	
		border-radius: 5px ;
		
		font-size: 15px;
		
		
			
	
	
	}
	
	div.avideo_line
	{
		position: relative;
		
		padding:5px;
		
	}
	
	#catalogue_videos
	{
		position: relative;
		
		height: 50%;
		
	}  	
  	
}


/* Mobile */
@media only screen and (min-width: 230px)  and (max-width: 360px) {

		body{
	
	
	}
	
	#ecran
	{
		position: relative;
		
		
	}
	
	button.catalogue
	{
		position: relative;
		
		background:transparent;
		
		font-size:25px;
		
		color:beige;
		
		cursor:pointer;
		
		border:0px solid silver;
		
		
		 
	}
	
	
	#menubar
	{
		position:fixed;
		top:0px;
		left:0px;
		width:100%;
		min-height:30px;
		z-index:1;
		background:#efefef;
		box-shadow:0px 0px 2px 1px #888888;
		
		display: none;
		
	}
	
	#menubar:hover
	{
		background:rgba(30,144,255,1);
		box-shadow:0px 0px 2px 1px #888888;
	}
	
	
	#general
	{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
	
	}
	
	#main
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:black;
	
	}
	
	
	
	#previous:hover
	{
		opacity: 1;
	}
	
	#previous
	{
		font-weight: bold;
		
		position:fixed;
		top:calc(50% - 60px);
		left:0px;
		
		min-height:30px;
		z-index:1000;
		background:#efefef;
		color: #595959;
		box-shadow:0px 0px 2px 1px #888888;
		font-size: 40px;
		padding: 5px;
		
		cursor: pointer;
		
		opacity: 0.0;
	
		animation-name: show;
		animation-duration: 1s;
		
		
	}
	
	
	
	
	#next:hover
	{
		
		opacity: 1.0;
	}
	
	
	
	
	#next
	{
		font-weight: bold;
		
		position:fixed;
		top:calc(50% - 60px);;
		right:0px;
		
		cursor: pointer;
		min-height:30px;
		z-index:1000;
		background:#efefef;
		color: #595959;
		box-shadow:0px 0px 2px 1px #888888;
		font-size: 40px;
		padding: 5px;
		
		opacity: 0.0;
		
		animation-name: show;
		animation-duration: 1s;
		
	}
	
	
	.page
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:smoke;
		
	
	}
	
	.half
	{
		position:relative;
		width:50%;
	}
	
	
	.fullheight
	{
		height:100%;
	}
	
	.third
	{
		position:relative;
		width:33%;
	}
	
	
	.quarter
	{
		position:relative;
		width:25%;
	}
	
	
	.abox
	{
		display:inline-block;
	}
	
	.top
	{
		vertical-align:top;
	}
	
	.middle
	{
		vertical-align:middle !important;
	}
	
	.half
	{
		position: relative;
		
		width: 50%;
		
	}
	
	label.catalogue
	{
		position: relative;
		
		padding:5px;
	}
	
	button.catalogue
	{
		position: relative;
		
		margin:10px;
	}
	
	.catalogue_header_half
	{
		position: relative;
		
		display: inline-block;
		
	}
	
	.bottom
	{
		vertical-align:bottom;
	}
	
	.left
	{
		text-align:left;
	}
	
	.right
	{
		text-align:right;
	}
	
	.center
	{
		text-align: center !important;
	}
	
	#tvscreen
	{
		position: relative;
		
		width: 100%;
		
		height: 100%;
		
		
	
	}
	
	
	
	
	.septa:hover
	{
		box-shadow: 0px 0px 2px 1px #efefef;
		
	}
	
	.septa
	{
		position: relative;
		
		width:calc((100% / 7));
		
		display: inline-block;
		
		height: 100%;
		
		box-shadow: 0px 0px 2px 1px rgba(255,255,255,0.3);
	
	}
	
	div.date_name
	{
		position: relative;
		
		color: #efefef;
		
		font-weight: bold;
		
		box-shadow: 0px 0px 2px 1px #efefef;
		
	}
						
	div.date_content
	{
		position: relative;
	
		height: calc(100: - 30px);
			
	}
	
	div.date_line_empty_not
	{
		position: relative;
		
		padding: 5px;
		
		min-height: 50px;
	}
	
	div.date_line
	{
		position: relative;
		
		padding: 5px;
		
		
	}
	
	button.tv
	{
		position: relative;
		
		width: 100%;
		
	}
	
	
	label.time
	{
		position: absolute;
		
		top: 0px;
		
		left: 0px;
		
		color: black;
		
		padding:0px;
		
		background: rgba(255,255,255,0.6);
		
		font-size: 12px;
	}
	
	
	label.duration
	{
		position: absolute;
		
		bottom: 0px;
		
		right: 0px;
		
		color: black;
		
		padding:0px;
		
		background: rgba(255,255,255,0.6);
		
		font-size: 12px;
	}
	
	
	#addbox
	{
		position: fixed;
		
		bottom: 0px;
		
		right: 0px;
		
		min-width: 200px;
		
		min-height: 400px;
		
		
		
		color: black;
		
		padding:0px;
		
		background: rgba(255,255,255,1);
		
		box-shadow: 0px 0px 2px 1px #888888;
		
		font-size: 12px;
		
		z-index: 1200;
		
	}
	
	#addheader
	{
		position: relative;
		
		padding:5px;
		
	}			
	
	button.some
	{
		position: relative;
		
		
		margin:5px  0px 5px 5px;
		
		display: inline-block;
		
		font-size: 20px;
		
		background:transparent;
		
		
		color: beige;
		
		
		
	}
	
	
	
	#catalogue_header:hover
	{
		opacity: 1.0;
	}
	
	#catalogue_header
	{
		position: absolute;
		
		width: 100%;
		
	
		z-index:1000; 
		
		background:rgba(0,0,0,0.8);
		
		
		box-shadow: 0px 0px 2px 1px #888888;
		
		opacity: 0.7;
	
	}
	
	label.catalogue
	{
		position: relative;
	
		color:beige;
			
		font-size: 30px;
		
		
	}
	
	#catalogue_content
	{
		position: relative;
		
			
	}
	
	div.avideo_header
	{
		position: absolute;
		
		right: 0px;
			
		text-align: right;
		
		
		z-index: 3;
		
	}
	
	div.avideo_content
	{
		position: relative;
	}
	
	div.avideo:hover
	{
	
			box-shadow: 0px 0px 2px 1px tomato;
	}
	
	
	div.avideo
	{
		position: relative;
		
		display: inline-block;
		
		
		width: 200px;
		
		box-shadow: 0px 0px 2px 1px #595959;
			
		height: 200px;
	}
	
	
	
	
	div.avideo_content
	{
		position: absolute;
		
		
		z-index: 1;
		
		width: 100%;
		
		height: 100%;
		
		
		
	}
	
	
	img.avideo
	{
		position: relative;
		
		max-height: 100%;
		
		max-width: 100%;
		
	
	}
								
	
	div.avideo_info:hover
	{
			opacity: 1;
	}
	
	
	div.avideo_info
	{
	
		position: absolute;
		
		top: 0px;
		
		right: 0px;
		
			
		width: 100%;
		
		height: 100%;
		
		z-index: 7;
	
		color: white;	
		
		opacity: 0;
		
		animation-name: show;
		
		animation-duration: 2s;
		
			
	}
	
	
	
	div.avideo_duration
	{
		position: relative;
	
	}
	
	
	label.video_info
	{
		position: relative;
		
		
	
	}
	
	div.avideo_description
	{
		position: relative;
		
		text-align: center;	
		
	}
	
	p.avideo_description
	{
		position: relative;
		
		
		font-size: 12px;
		
		
	}
	
	div.avideo_duration
	{
		position: relative;
	
	}
	
	
	label.avideo_title
	{
		position: relative;
		
		font-weight: bold;
	
	}
	
	div.avideo_title
	{
		position: relative;
		
		
		padding: 5px 10px;
	}
	
	
	
	
	
	
	
	.selected
	{
	
		box-shadow: 0px 0px 2px 1px orange;
		
	}
	
	#catalogue_main
	{
		position: relative;
		
		width: 90%;
		
		height: 90%;
		
		margin-right: auto;
	
		margin-left: auto;
		
		top:5%;
		
		box-shadow: 0px 0px 2px 1px #efefef;
		
		background:black;
	}
	
	
	
	#catalogue
	{
		position:fixed;
		
		top: 0px;
		
		left: 0px;
		
		
		z-index: 1200;
		
		
		width: 100%;
		
		height: 100%;
		
		
		
	}
	
	#catalogue_content
	{
		position: relative;
		
		height: 100%;
		
	}
	
	button.amedia
	{
		position: relative;
		
		background:dodgerblue;
		
		color: white;
		
		border:0px solid silver;
	
		border-radius: 5px ;
		
		font-size: 15px;
		
		
			
		
	}
	
	
	button.amedia
	{
		position: relative;
		
		background:dodgerblue;
		
		color: white;
		
		border:0px solid silver;
	
		border-radius: 5px ;
		
		font-size: 15px;
		
		
			
		
	}
	
	
	
	#ajouterbtn:hover
	{
		box-shadow:0px 0px 2px 1px #888888;
	}
	
	
	#ajouterbtn
	{
		position:fixed;
	
		bottom:5px;
	
		left:5px;
		
		z-index:1000;
		
		background:#efefef;
		
		color: black;
		
		font-size: 40px;
		
		border-radius: 100%;
		
		padding:5px 10px;
	
		box-shadow:0px 0px 2px 1px transparent;
		
		
		
	}
	
	button.amedia_view
	{
		
		position: relative;
		
		background:crimson;
		
		color: white;
		
		border:0px solid silver;
	
		border-radius: 5px ;
		
		font-size: 15px;
		
		
			
	
	
	}
	
	div.avideo_line
	{
		position: relative;
		
		padding:5px;
		
	}
	
	#catalogue_videos
	{
		position: relative;
		
		height: 50%;
		
	}
}

/* Mobile */
@media only screen and (max-width: 229px) {
		body{
	
	
	}
	
	#ecran
	{
		position: relative;
		
		
	}
	
	button.catalogue
	{
		position: relative;
		
		background:transparent;
		
		font-size:25px;
		
		color:beige;
		
		cursor:pointer;
		
		border:0px solid silver;
		
		
		 
	}
	
	
	#menubar
	{
		position:fixed;
		top:0px;
		left:0px;
		width:100%;
		min-height:30px;
		z-index:1;
		background:#efefef;
		box-shadow:0px 0px 2px 1px #888888;
		
		display: none;
		
	}
	
	#menubar:hover
	{
		background:rgba(30,144,255,1);
		box-shadow:0px 0px 2px 1px #888888;
	}
	
	
	#general
	{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
	
	}
	
	#main
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:black;
	
	}
	
	
	
	#previous:hover
	{
		opacity: 1;
	}
	
	#previous
	{
		font-weight: bold;
		
		position:fixed;
		top:calc(50% - 60px);
		left:0px;
		
		min-height:30px;
		z-index:1000;
		background:#efefef;
		color: #595959;
		box-shadow:0px 0px 2px 1px #888888;
		font-size: 40px;
		padding: 5px;
		
		cursor: pointer;
		
		opacity: 0.0;
	
		animation-name: show;
		animation-duration: 1s;
		
		
	}
	
	
	
	
	#next:hover
	{
		
		opacity: 1.0;
	}
	
	
	
	
	#next
	{
		font-weight: bold;
		
		position:fixed;
		top:calc(50% - 60px);;
		right:0px;
		
		cursor: pointer;
		min-height:30px;
		z-index:1000;
		background:#efefef;
		color: #595959;
		box-shadow:0px 0px 2px 1px #888888;
		font-size: 40px;
		padding: 5px;
		
		opacity: 0.0;
		
		animation-name: show;
		animation-duration: 1s;
		
	}
	
	
	.page
	{
		position:relative;
	
		width:100%;
		height:100%;
		background:smoke;
		
	
	}
	
	.half
	{
		position:relative;
		width:50%;
	}
	
	
	.fullheight
	{
		height:100%;
	}
	
	.third
	{
		position:relative;
		width:33%;
	}
	
	
	.quarter
	{
		position:relative;
		width:25%;
	}
	
	
	.abox
	{
		display:inline-block;
	}
	
	.top
	{
		vertical-align:top;
	}
	
	.middle
	{
		vertical-align:middle !important;
	}
	
	.half
	{
		position: relative;
		
		width: 50%;
		
	}
	
	label.catalogue
	{
		position: relative;
		
		padding:5px;
	}
	
	button.catalogue
	{
		position: relative;
		
		margin:10px;
	}
	
	.catalogue_header_half
	{
		position: relative;
		
		display: inline-block;
		
	}
	
	.bottom
	{
		vertical-align:bottom;
	}
	
	.left
	{
		text-align:left;
	}
	
	.right
	{
		text-align:right;
	}
	
	.center
	{
		text-align: center !important;
	}
	
	#tvscreen
	{
		position: relative;
		
		width: 100%;
		
		height: 100%;
		
		
	
	}
	
	
	
	
	.septa:hover
	{
		box-shadow: 0px 0px 2px 1px #efefef;
		
	}
	
	.septa
	{
		position: relative;
		
		width:calc((100% / 7));
		
		display: inline-block;
		
		height: 100%;
		
		box-shadow: 0px 0px 2px 1px rgba(255,255,255,0.3);
	
	}
	
	div.date_name
	{
		position: relative;
		
		color: #efefef;
		
		font-weight: bold;
		
		box-shadow: 0px 0px 2px 1px #efefef;
		
	}
						
	div.date_content
	{
		position: relative;
	
		height: calc(100: - 30px);
			
	}
	
	div.date_line_empty_not
	{
		position: relative;
		
		padding: 5px;
		
		min-height: 50px;
	}
	
	div.date_line
	{
		position: relative;
		
		padding: 5px;
		
		
	}
	
	button.tv
	{
		position: relative;
		
		width: 100%;
		
	}
	
	
	label.time
	{
		position: absolute;
		
		top: 0px;
		
		left: 0px;
		
		color: black;
		
		padding:0px;
		
		background: rgba(255,255,255,0.6);
		
		font-size: 12px;
	}
	
	
	label.duration
	{
		position: absolute;
		
		bottom: 0px;
		
		right: 0px;
		
		color: black;
		
		padding:0px;
		
		background: rgba(255,255,255,0.6);
		
		font-size: 12px;
	}
	
	
	#addbox
	{
		position: fixed;
		
		bottom: 0px;
		
		right: 0px;
		
		min-width: 200px;
		
		min-height: 400px;
		
		
		
		color: black;
		
		padding:0px;
		
		background: rgba(255,255,255,1);
		
		box-shadow: 0px 0px 2px 1px #888888;
		
		font-size: 12px;
		
		z-index: 1200;
		
	}
	
	#addheader
	{
		position: relative;
		
		padding:5px;
		
	}			
	
	button.some
	{
		position: relative;
		
		
		margin:5px  0px 5px 5px;
		
		display: inline-block;
		
		font-size: 20px;
		
		background:transparent;
		
		
		color: beige;
		
		
		
	}
	
	
	
	#catalogue_header:hover
	{
		opacity: 1.0;
	}
	
	#catalogue_header
	{
		position: absolute;
		
		width: 100%;
		
	
		z-index:1000; 
		
		background:rgba(0,0,0,0.8);
		
		
		box-shadow: 0px 0px 2px 1px #888888;
		
		opacity: 0.7;
	
	}
	
	label.catalogue
	{
		position: relative;
	
		color:beige;
			
		font-size: 30px;
		
		
	}
	
	#catalogue_content
	{
		position: relative;
		
			
	}
	
	div.avideo_header
	{
		position: absolute;
		
		right: 0px;
			
		text-align: right;
		
		
		z-index: 3;
		
	}
	
	div.avideo_content
	{
		position: relative;
	}
	
	div.avideo:hover
	{
	
			box-shadow: 0px 0px 2px 1px tomato;
	}
	
	
	div.avideo
	{
		position: relative;
		
		display: inline-block;
		
		
		width: 200px;
		
		box-shadow: 0px 0px 2px 1px #595959;
			
		height: 200px;
	}
	
	
	
	
	div.avideo_content
	{
		position: absolute;
		
		
		z-index: 1;
		
		width: 100%;
		
		height: 100%;
		
		
		
	}
	
	
	img.avideo
	{
		position: relative;
		
		max-height: 100%;
		
		max-width: 100%;
		
	
	}
								
	
	div.avideo_info:hover
	{
			opacity: 1;
	}
	
	
	div.avideo_info
	{
	
		position: absolute;
		
		top: 0px;
		
		right: 0px;
		
			
		width: 100%;
		
		height: 100%;
		
		z-index: 7;
	
		color: white;	
		
		opacity: 0;
		
		animation-name: show;
		
		animation-duration: 2s;
		
			
	}
	
	
	
	div.avideo_duration
	{
		position: relative;
	
	}
	
	
	label.video_info
	{
		position: relative;
		
		
	
	}
	
	div.avideo_description
	{
		position: relative;
		
		text-align: center;	
		
	}
	
	p.avideo_description
	{
		position: relative;
		
		
		font-size: 12px;
		
		
	}
	
	div.avideo_duration
	{
		position: relative;
	
	}
	
	
	label.avideo_title
	{
		position: relative;
		
		font-weight: bold;
	
	}
	
	div.avideo_title
	{
		position: relative;
		
		
		padding: 5px 10px;
	}
	
	
	
	
	
	
	
	.selected
	{
	
		box-shadow: 0px 0px 2px 1px orange;
		
	}
	
	#catalogue_main
	{
		position: relative;
		
		width: 90%;
		
		height: 90%;
		
		margin-right: auto;
	
		margin-left: auto;
		
		top:5%;
		
		box-shadow: 0px 0px 2px 1px #efefef;
		
		background:black;
	}
	
	
	
	#catalogue
	{
		position:fixed;
		
		top: 0px;
		
		left: 0px;
		
		
		z-index: 1200;
		
		
		width: 100%;
		
		height: 100%;
		
		
		
	}
	
	#catalogue_content
	{
		position: relative;
		
		height: 100%;
		
	}
	
	button.amedia
	{
		position: relative;
		
		background:dodgerblue;
		
		color: white;
		
		border:0px solid silver;
	
		border-radius: 5px ;
		
		font-size: 15px;
		
		
			
		
	}
	
	
	button.amedia
	{
		position: relative;
		
		background:dodgerblue;
		
		color: white;
		
		border:0px solid silver;
	
		border-radius: 5px ;
		
		font-size: 15px;
		
		
			
		
	}
	
	
	
	#ajouterbtn:hover
	{
		box-shadow:0px 0px 2px 1px #888888;
	}
	
	
	#ajouterbtn
	{
		position:fixed;
	
		bottom:5px;
	
		left:5px;
		
		z-index:1000;
		
		background:#efefef;
		
		color: black;
		
		font-size: 40px;
		
		border-radius: 100%;
		
		padding:5px 10px;
	
		box-shadow:0px 0px 2px 1px transparent;
		
		
		
	}
	
	button.amedia_view
	{
		
		position: relative;
		
		background:crimson;
		
		color: white;
		
		border:0px solid silver;
	
		border-radius: 5px ;
		
		font-size: 15px;
		
		
			
	
	
	}
	
	div.avideo_line
	{
		position: relative;
		
		padding:5px;
		
	}
	
	#catalogue_videos
	{
		position: relative;
		
		height: 50%;
		
	}	
}




	
	@keyframes show
	{
		from{ opacity: 0.0;}
		to{ opacity: 1.0;}
		
	}