:root {
	--LargMenu: 10.5rem;
	--BordMenu:0.2rem;
	--BrdRadiusMenu: 5px;
	--FontsizeMenu: 1.7rem;
	--FontsizeMenuMob: 2.1rem;
}



/********** Font **********/
@font-face 
{
    font-family: "Dirty-menu";
    src: url('http://dirtyfloi.free.fr/fonts/Road_Rage.otf');
}

@font-face 
{
    font-family: "Dirty-font";
    src: url('http://dirtyfloi.free.fr/fonts/dirty-font.ttf');
}

@font-face 
{
    font-family: "Dirty-font";
    font-weight: bold;
    src: url('http://dirtyfloi.free.fr/fonts/dirty-font-bold.ttf');
}

strong {font-weight: bold !important; font-style: normal !important;}


.White {color: white;}

.LemonChiffon {color: LemonChiffon;}

.Important
{
	margin-bottom: 0.7rem;
	display: inline-block;
	background: red;
	background-color: red !important; /* for IE */
	color: black !important;
}

.Paragraphe {margin-bottom: 0.5rem;}



h1 	
{ 
	color:#C60000;
	text-align: center;
	margin-bottom:10%;
	font-size: 2.1rem;
	font-family:trebuchet, helvetica, sans-serif;
	font-weight: 900;
	font-style: normal;
}

#P2 h1
{
	color: #FAE974 ;
	font-family: Dirty-font, trebuchet, helvetica, sans-serif !important;
}

h2
{
	margin-top:  15%;
	color: #FAE974 ;
	font-size: 1.6rem;
}

.left
{
	font-size: 1rem;
	font-family:trebuchet, helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	text-align: left;
}

.center
{
	font-size: 1rem;
	font-family:trebuchet, helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	text-align: center;
}


.flame
 {
  text-shadow: 2px -1px 5px #686767, 4px -6px 6px #FFFF33, 6px -10px 7px #FFDD33, 3px -18px 10px #FF8800, 0px -26px 20px #FF2200;
}


.city	{color:red;}




/********** Box **********/

.hidden 
{
	display: none;
}

html
{
	margin: 0 !important;
	height: 100%;
}

body
{
	position:relative;
	background-color: black;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,303030+48,2b2b2b+55,131313+100 */
	color:red;
	text-align: center;
	font-size: 1rem;
	margin: 0 auto !important;
	/*left: 0;
	top: 0;
	right: 0;*/
	bottom: 0;
	min-height: 100%;
	height: 100%;

}

#P1 
{ 
	background-color:transparent;
	background-image:  url("http://dirtyfloi.free.fr/pics/menu-top.png"), url("http://dirtyfloi.free.fr/pics/menu-bot.png"), url("http://dirtyfloi.free.fr/pics/menu-mid.png");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: right top, right bottom, right center;
	background-size: calc(100% - var(--LargMenu) - var(--BordMenu) - 2*var(--BrdRadiusMenu)) auto;

	position:relative;
	padding-left: 15% ;
	padding-right: 15% ;
	padding-top: 2rem ;
	padding-bottom: 6rem ;
	margin-left: calc(var(--LargMenu) + var(--BordMenu) + 2*var(--BrdRadiusMenu));
	

	text-align: center;
	color: white;
	padding-bottom: 3rem;
	min-height: 100%;
}

#P2 
{ 
	background-color:transparent;
	background-image:  url("http://dirtyfloi.free.fr/pics/bg/lyrics-bg.png");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: right center;
	background-size: calc(100% - var(--LargMenu) - var(--BordMenu) - 2*var(--BrdRadiusMenu)) 100%;

	position:relative;
	padding-left: 7% ;
	padding-right: 7% ;
	padding-top: 0.2em ;
	margin-left: calc(var(--LargMenu) + var(--BordMenu) + 2*var(--BrdRadiusMenu));
	
	color: white ;
	font-family:Dirty-font, trebuchet, helvetica, sans-serif !important;
	min-height: 100%;
}

#P2>footer
{
	display: none;
}

#LeftButton
{
	position: fixed;
	left: var(--BordMenu);
	width: var(--LargMenu);

	top: 0.5rem;
	bottom: 0.5rem;
	padding-top: 2.4rem;
	padding-bottom: 2.4rem;
	color:red;

	background-color:#9D9D9B;
	background-image: url("http://dirtyfloi.free.fr/pics/dirty-bg-menu-fix.png"), url("http://dirtyfloi.free.fr/pics/dirty-bg-menu-fix.png"), url("http://dirtyfloi.free.fr/pics/dirty-bg-menu.jpg");
	background-repeat: no-repeat;
	background-position: left top, left bottom, left top;
	background-size: 100% auto, 100% auto, 100% 100%;
	background-origin: border-box ;
	border-radius: 10px;
	border:5px outset #AAAAA9;
}

footer
{
	background-color:transparent;
	position:fixed;
	left: calc(var(--LargMenu) + var(--BordMenu) + 2*var(--BrdRadiusMenu) + 13%);
	right: 12.5%;
	bottom: 0px;
	height:2rem;
	text-align: center;
	display: none;
}

.video
{
	 display: block;
	 margin-top: 2rem;
	 margin-bottom: 2rem;
}

iframe
{
	width: 560px;
	height: 315px;
}

/* à optimiser *****************************************************************************************************************************************************************/
article
{
	margin-bottom: 4.6rem;
}


.bar
{
	margin-top:  11%;
	width: 35%;
	height: auto;
}

#work
{
	margin-top:  11%;
	width: 25%;
	height: auto;
}



.allcenter
{
	text-align: center !important;
	margin-top: 5% !important;
	margin-bottom: 5% !important;
}

.photo
{
	text-align: center !important;
}

.photo img
{
	width: 13% !important;
	height: auto !important;
	border: none !important;
}

.photo .prev
{
	width: 6% !important;
	height: auto !important;
	border: none !important;
}

/*
.photo1
{
	text-align: center !important;
}
*/
.photo1 img
{
	margin:1%;
	padding: 2%;
	width: 15% !important;
	height: auto !important;
	border-style: solid !important;
	border-color:#B70300;
	border-width: 1px;
}

/*
.photo1 .prev
{
	width: 6% !important;
	height: auto !important;
	border: none !important;
}
*/

.p1article
{
	text-align: justify !important;
}

.h2article
{
	display: none !important;
}

.h1article
{
	text-align: left !important;
	margin-bottom:  2% !important;
	font-size: 1.4rem !important;
}

.h1article img
{
	width:50%;
}

#chrono
{
	margin-top: 7rem !important;
	margin-bottom: 6rem !important;
	border-collapse: collapse ;
	text-align: center;
}

#chrono td, #chrono th
{

	border-right: dotted;
	border-top: dotted;
	border-bottom: dotted;
	border-color: grey;
	border-width: 1px;
}

caption
{
	color: #FAE974 !important;
}



article span
{
	color:red !important;
	font-weight: bold !important;
}


.BlockLive
{
	height: auto;
	margin-top: 4rem;
	margin-left: 4rem;
	width: auto;
}

.live
{
	margin-top:0 !important;
	margin-left:1rem !important;
	display: inline-block;
	vertical-align: middle;
}

.live caption, .album caption
{
	display: none !important;
}

.cellfly
{
	text-align: center;
	width: 10.5rem ;
}

.album
{
	margin-top:0 !important;
	margin-left:1rem !important;
	display: inline-block;
	vertical-align: middle;
}

.album th
{
	text-align: right;
}

.album td
{
	text-align: left;
	margin-left: 0.5rem;
}
.lyrics
{
	text-align: left;
}



.Row
{
	background-color:blue;
	display:table-row;
	table-layout:fixed;
	vertical-align:center;
	text-align: center;
	left: 0px ;
	right: 0px;
}

.Cell
{
	display:table-cell;
	table-layout:fixed;
	vertical-align:center;
	text-align: center;
	width: auto;
}



	.dirtylive
	{
		text-align: left;
	}

.vcenter
{
	height: 100%;
	display:inline-block !important;
	vertical-align:middle !important;
	text-align:center !important;
}

.vcenter span
{
	height: 100%;
	display:inline-block !important;
	vertical-align:middle !important;
/*  text-align:center !important;*/
}





/********** Menu / Link / Button **********/

a:link {text-decoration:none; color:yellow; font-weight: bold;}
a:hover {cursor:url(http://dirtyfloi.free.fr/pics/divers/dirty-fuck.cur),auto; color: LemonChiffon;}
a:visited {color: grey;}

.otherlink a:link {text-decoration : underline;}
.otherlink a:hover {text-decoration : overline underline;}



div.BoutonRevDTF
{
	display: inline-block;
	margin-bottom: 1.3rem;
	color: black;
	width: 100%;
	height: var(--FontsizeMenu);
	line-height: var(--FontsizeMenu) !important;
	font-size : var(--FontsizeMenu);
	font-family: Dirty-menu, arial, sans-serif !important;
}
div.BoutonRevDTF:hover {color: #550000;}
div.BoutonRevDTF:active {color: #880000;}


div.BoutonRev5A
{
	display: inline-block;
	margin-top: 1.7rem;
	color: #DDDDDD;
	width: 100%;
	height: var(--FontsizeMenu);
	line-height: var(--FontsizeMenu) !important;
	font-size : var(--FontsizeMenu);
	font-family: Dirty-menu, arial, sans-serif !important;
}
div.BoutonRev5A:hover {color: #ffffff;}
div.BoutonRev5A:active {color: #000000;}


.BoutonRev5A span {font: normal 0.7rem arial, sans-serif;}


div.BoutonRev5A[disabled],
div.BoutonRev5A[disabled]:hover,
div.BoutonRev5A[disabled]:active
{
  background: #999;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  cursor: not-allowed;
  text-shadow: none;
 }
 

#P2 a
{
	color: white;
	font-family: Dirty-font, trebuchet, helvetica, sans-serif !important;
	font-size: 1.1rem;
	font-weight: bold;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 6rem;
	display: inline-block;
}

a p
{ 
	position: relative;
	font-family: Arial,sans-serif;
	line-height: 1.4rem;
	color: yellow;
	border-radius: 8px;
	margin-left:15%;
	margin-right:15%;
	margin-bottom:1rem;
	text-align: center;

	background: #c60000;
	background: -webkit-linear-gradient( #C60000, #450000);
	background: -moz-linear-gradient( #C60000, #450000);
	background: -ms-linear-gradient( #C60000, #450000);
	background: -o-linear-gradient( #C60000, #450000);
	background: linear-gradient( #C60000, #450000); 
 }

a p:hover
{
	color: yellow;
	background: #880000;
	background: -webkit-linear-gradient( #BA0000, #C20000);
	background: -moz-linear-gradient( #BA0000, #C20000);
	background: -ms-linear-gradient( #BA0000, #C20000);
	background: -o-linear-gradient( #BA0000, #C20000);
	background: linear-gradient( #BA0000, #C20000);
	box-shadow: 1px 1px 10px black inset;
}

a p:active
 {
	color: #000;
	background: #880000;
	background: -webkit-linear-gradient( #B20000, #BA0000);
	background: -moz-linear-gradient( #B20000, #BA0000);
	background: -ms-linear-gradient( #B20000, #BA0000);
	background: -o-linear-gradient( #B20000, #BA0000);
	background: linear-gradient( #B20000, #BA0000);
 }




/********** Image **********/

#refresh {width: 2rem}


#fleche
{
	background-color: transparent;
	background-image: url("http://dirtyfloi.free.fr/pics/divers/dirty-fleche.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
	background-origin: border-box ;
	border-width: 0px !important;
	border-color: transparent !important;
	border: none !important;
}

#valid-html5
{
	float: right;
	height: 100%;
}

#valid-css3
{
	float: left;
	height: 100%;
}

#captcha
{
	width: 10rem;
}

.cellfly img
{
	margin-top:0em !important;
	width: 7rem !important;
}

.video img {width: 560px; height: 315px; border: 1px solid yellow;}





/*   gallery photo   */

#IDEnterfullscreen
{
	display: none;
}


/********** A voir**********/

time
{
	display: block ;
}


/********** Audio player **********/
#player
{
	width: 50%;
	height: 3rem;
	margin: auto;
}



/********** CSS pour menu mobile **********/

#respmenu , #toggle {display: none;}

/********** fin adaptation menu mobile **********/
	

@media all and (max-width: 991px)
{

	html {font-size: 330%; width: 100%;}
	
	body {background-color: black !important; width: 100%;}

	#P1
	{
		margin-left: unset;
		padding: unset;

		position:relative;
		padding-bottom: 3rem;
		padding-left: 0.4rem ;
		padding-right: 0.4rem ;
		margin-top: 1.5rem;
		/*margin-bottom: 5rem;*/
		max-width: 100%;


		background-image:  url("http://dirtyfloi.free.fr/pics/menu-bot-mob.png");
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: bottom;
		background-size: 100%;
	}
	
	#P2
	{
		margin-left: unset;
		padding: unset;

		position:relative;
		padding-bottom: 3rem;
		padding-left: 0.4rem ;
		padding-right: 0.4rem ;
		margin-top: 1.5rem;

		background-color: black;
		background-image:  url("http://dirtyfloi.free.fr/pics/menu-bot-mob.png");
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: bottom;
		background-size: 100%;
	}
	
	footer
	{
		position:relative;
		left: unset;
		right: unset;
		bottom: unset;
		height: 1.5rem;
		margin: 2rem 0.5rem;
	}
	
	iframe
	{
		width: 100vmin;
		height: 56.25vmin;
	}
	
	a p
	{ 
		line-height: 2.5rem;
		margin-left:0;
		margin-right:0;
		margin-bottom:0.2rem;
	}
	.photo1 img
	{
		width: 35% !important;
		height: auto !important;
	}
	
	.BlockLive
	{
		margin-top: 2.5rem;
		margin-left: unset;
	}
	
	.cellfly
	{
		width: 100%;
	}
	.live
	{
		margin-left:unset !important;
	}
	
/*	.BlockLive .live
	{
		margin-left: 0.5rem !important;
	}*/
	
	.BlockLive .album
	{
		margin-left: unset !important;
	}
	
	.album th
	{
		width: 50%;
	}

	.album td
	{
		width: 50%;
		padding-left: 0.3rem;
	}
	.dirtylive
	{
		text-align: center;
	}
	
	.lyrics
	{
		text-align: center;
	}
	
	.Audio
	{
		display: block;
		max-height: 10rem;
        max-width: 10rem;
        margin: auto;
        object-fit: contain;
	}
	
	


	/*header, nav, select, input, label {background-color:transparent;}*/
	
	#imgent	{width: 40%;}
		
	/*Menu*/
	
	#LeftButton
	{
		position:relative;
		left: unset;
		width: 100%;
		text-align: center;
		border-radius: 1rem;
		border: unset;
	}

	div.BoutonRevDTF
	{
		margin-bottom: 0.9rem;
		line-height: var(--FontsizeMenuMob) !important;
		font-size : var(--FontsizeMenuMob) !important;
		height: var(--FontsizeMenuMob) !important;
	}
	div.BoutonRev5A
	{
		-moz-border-radius: unset;
		-webkit-border-radius: unset;
		border-radius: unset;
		margin-top: 0.9rem;
		width: 100%;
		
		line-height: var(--FontsizeMenuMob) !important;
		font-size : var(--FontsizeMenuMob) !important;
		height: var(--FontsizeMenuMob) !important;
	}

	select, input {font-size: 1rem;}
	
	#respmenu {display: unset;}

	body .main_pages 
	{
		display: none;
		flex-direction: column;
		width: 100%;
	}

	label 
	{
		display: flex;
		/*justify-content: center;*/
		/*align-itrems: center;*/
		font-size: 2rem;
		color: white;
		cursor: pointer;
		text-align: left;
	}

	#toggle:checked + .main_pages {display: flex;}
}



@media (orientation: landscape)
{
/*	body {flex-direction: row;}*/
}

@media (orientation: portrait)
{
/*	body {flex-direction: column;}*/
}

/*  handheld déconseillé */
@media handheld, only screen and (max-device-width:500px), only screen and (max-width:500px) 
{
	
}