.monster {
  width: 120px;
  height: 151px;
  transform: translateY(-50px);
  background: url('../galery/colibfin.png') left center;
  animation: play 0.25s steps(4) infinite;
}

@keyframes play {
   100% { background-position: -480px; }
}

body
{

	background:lightgrey;
	font-size: 100%;

}

input, textarea
{
	border:1px solid black;
}

#affiche
{
display:block;
position:absolute;
top:0px;
left:50%;
transform: translateX(-50%);
margin: 0 auto;
width: 90vw;
	/* background-image : url(../images/top.png), url(../images/background.jpg); */
	background-repeat: no-repeat, repeat-y;
	background-position: top left, none;
	background-size: 100% 77px, 100% 100%;	
}

#blockmenu
{
display:block;
position:absolute;
top:0px;
left:0px;
margin: 0 auto;
padding: 10px;
width: 100vh;
	
}

@font-face
{
font-family:Sego;
src: url(../ttf/segoeui.ttf);
}

@font-face
{
font-family: Graphite;
src: url("../ttf/arlrdbd.ttf");
}

#menu{
	display:block;
	position:relative;
	top : 0px;
	left: 50%;
	transform: translate(-50%,-0%);
	margin-top:1%;
	width:90%;
    padding-bottom: 10%;
    height: 0;
	color:#000;
	background-image : url(../images/menu.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	z-index:19;
}

#menuin{
	display:block;
	position:absolute;
	left:50%;
	top: 42%;
	transform: translate(-50%,-50%);
	padding:0px;
	width:85%;
	height:20px;
	color:#000;
	z-index:19;
	padding-left:5%;
}
	
#menuleft{
	display:block;
	position:relative;
	left: 0%;
	top: 50%;
	transform: translate(-0%,-50%);
	padding:0px;
	width:42%;
	height:60%;
	color:#000;
	z-index:20;
}
#menuright{
	display:block;
	position:relative;
	left: 60%;
	top: 10%;
	transform: translate(-0%,-95%);
	padding:0px;
	width:42%;
	height:60%;
	color:#000;
	z-index:20;

}

#logo
{
	display:block;
	position:absolute;
	top : 5px;
	left: 50%;
	transform: translateX(-40%);
	padding:0px;
	height:13vw;
	width:13vw;
	z-index:999; 
}

#topslide
{
	display:block;
	position:relative;
	top:5%;
	left: 50%;
	transform: translateX(-50%);
    padding-bottom: 20%;
    height: 0;
	width:74.5%;
	z-index:5;

}

/* Anim */


.slide {
    border: none; 
    opacity: 0; 
    position: absolute; 
    top: 40%; 
	left: 50%;
	transform: translate(-50%,-50%);
    -webkit-transition: opacity 3s linear;
    -moz-transition: opacity 3s linear;
    -o-transition: opacity 5s linear;
    transition: opacity 3s linear;
/*	border:1px solid #c0ab70; */
	box-shadow: 5px 5px 10px #000;
	
}
.showMe {opacity: 1;}

#mybox
{
	display:block;
	position:relative;
	top:0;
	left:50%;	
	transform: translate(-50%,2%);
	width:75%;
	min-height:300px;
	padding:1%;
}

#boxleft
{
	display:table-layout;
	background-color:#623385;
	border:1px solid #fff;
	color:white;
	box-shadow: 5px 5px 10px black;
	z-index:5;
	text-align:justify;
	font-family:Graphite; 
	font-size:1.5vw; 
	font-weight:normal;
	padding:15px;
	margin:2%;
}

#boxright
{
	display:table-layout;
	background-color:#623385;
	color:white;
	border:1px solid #fff;
	box-shadow: 5px 5px 10px black;
	z-index:5;
	text-align:justify;
	font-family:Graphite; 
	font-size:1.5vw; 
	font-weight:normal;
	padding:15px;
	margin-top:20px;
}

#boxleft1
{
	display:block;
	position:relative;
	top:4vw;
	left: 12.8%;
	width:40%;
	min-height:300px;
	background-color:#d7c08e;
	border:1px solid #978155;
	box-shadow: 5px 5px 10px black;
	z-index:5;
	text-align:justify;
	font-family:Graphite; 
	font-size:1.5vw; 
	font-weight:normal;
	padding:15px;
}

#boxleft .titre, #boxleft1 .titre, #boxright .titre
{
	font-size:3vw; 
	font-weight:bold;
	text-align:left;
	text-shadow: 2px 2px 4px black;
	text-shadow: -2px -2px 0px black, 0px -2px 0px black, 2px 0px 0px black, 2px 2px 0px black;
}

#boxleft .soustitre, #boxleft1 .soustitre, #boxright .soustitre
{
	font-size:2vw; 
	font-weight:bold;
	text-align:left;
	color:#FFFF66;
}

#boxleft a, #boxleft1 a, #boxright .a
{ 
	color:#FFFF66;
}

#boxleft a:hover, #boxleft1 a:hover, #boxright .a:hover
{ 
	font-weight:bold;
	color:#FFFF66;
	text-decoration:none;
}



.menu{
	display:block;
	position:relative;
	float:left;
	text-align:center;
	margin-right:5%;
    top:5%;
	left:0px;	line-height:50%;
	padding:0px;
}

.menu2
{   
	display:block;
	position:fixed;
	float:left;
	text-align:center;
top: 50%;
left: 50%;
transform: translate(100%, -40%);	
	padding:0px;
	z-index:2000;
}

.menu a{
	display:block;

	color:#FFF;
	font-family:Arial;
	font-size:1.2vw;

}
.menu a:link, .menu a:visited{
	text-decoration:none;
	color:#FFF;
	font-family:Arial;
	font-size:1.2vw;
	font-weight:normal;
	text-shadow:0px 0px 0.2em darkgrey, 2px 2px 1px black, 2px 2px 1px black, 0px 0px 0.2em black;
}

.menu a:hover, .menu a:focus{
	text-decoration:underline;
	text-shadow:0px 0px 0.2em darkgrey, 0px 0px 0.2em black, 0px 0px 0.2em black, 0px 0px 0.2em black;

}

.compt
{
	display:block;
	margin-left:55vw;
	text-decoration:none;
	color:#FFFF66;
	font-family:Arial;
	font-size:1.2vw;
	font-weight:normal;
	text-shadow:0px 0px 0.2em darkgrey, 2px 2px 1px black, 2px 2px 1px black, 0px 0px 0.2em black;
}
.comptieme
{
	text-decoration:none;
	color:#FFFF66;
	font-family:Arial;
	font-size:0.8vw;
	line-height:
	font-weight:normal;
	text-shadow:0px 0px 0.2em darkgrey, 2px 2px 1px black, 2px 2px 1px black, 0px 0px 0.2em black;
}
#footer1
{
	display:block;
	position:absolute;

	width:100%;
	background:red;
	font-family: Arial; 
	font-size:1vw; 
	font-weight:normal;
	color:#999;
	padding-top:20px;
	margin-top:30px;
}

#infoot
{
	display:block;
	position:absolute;
	width:95%;
	margin:30px 0 0 0;
	font-family: Arial; 
	font-size:1vw; 
	font-weight:normal;
	color:#fff;
	padding:5px;
	text-align:center;
	left:50%;
	transform:translateX(-50%);
	background-color:#623385;
	border:1px solid #fff;
	box-shadow: 5px 5px 10px black;
}

#infoot a
{ 
	color:#FFFF66;
}

#infoot a:hover
{ 
	color:#FFF;
	text-decoration:none;
}



#pastille
{
	margin:1vw;
	padding:1vw 1vw 2vw 1vw;
	background-image : url(../images/guitop.png), url(../images/guibot.png);
	background-repeat: no-repeat, no-repeat;
	background-position: top left, bottom right ;
	background-size:3vw 3vw,3vw 3vw;
	text-align:justify;

}


#bas
{
	display:block;
	position:relative;
	width:100%;
	background:red;
}
.red
{
	font-family:Sego; 
	font-size:1vw;
	font-weight:bold; 
	font-style:italic;
	color:#FFFF66;
}

.redprice
{	
	font-family:Graphite; 
	font-size:1.5vw;
	font-weight:bold; 
	color:#ffffff;
	font-weight:bold;	
	text-shadow:-1px 0 0.2em #000, 0 1px 0.2em #000, 1px 0 0.2em  #000, 0 -1px 0.2em  #000;
}

.smol
{
	font-family:Graphite; 
	font-size:0.7vw;
	font-weight:bold; 
	color:#978155;
}

.gros
{
	font-family:Graphite; 
	font-size:1.2vw;
	font-weight:bold; 
	text-align:justify;
	color:#999999;
}
.gros .red
{
	font-family:Graphite; 
	font-size:1.2vw;
	font-weight:bold; 
	text-align:justify;
	color:#FFFFCC;
}

.fan 
	{
    width: 80%;
    height: 80%;
    -webkit-animation:spin 15s linear infinite;
    -moz-animation:spin 15s linear infinite;
    animation:spin 15s linear infinite;
	}
	
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#player
{
	width:80%;
	height:5vw;
}

#playlist
		{
		display:block;
		width:75%;
		text-align:center;
		}

#playlist a
		{
		display:block;
		height:8%;
		padding:5px;

		font-family:Arial;
		font-size:0.9vw;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		border:1px solid #5e3612;
		margin:1px;


		
	background:#e2d2a8;
	color:#ffffff;
	font-weight:bold;	
	text-shadow:-1px 0 0.2em #000, 0 1px 0.2em #000, 1px 0 0.2em  #000, 0 -1px 0.2em  #000;
		
		}

#playlist a:link, #playlist a:visited
{
	text-decoration:none;
	color:#fff;
	font-family:Arial;
	font-size:0.9vw;
	font-weight:bold;
}

#playlist a:focus
{	background:#c0ab70;}

#playlist a:hover, #playlist a:active
{
		background-color:#978155;
		color:#FFFF66;	
}

ul 
		{
		list-style-type: none;
		margin: 0;
		padding: 0;
		}
.tel
{ 
	display:block;
	height:3vw;
	text-align:center;
	font-family:Arial;
	font-size:2vw;
	color:#ffffff;
	font-weight:900;
	line-height:130%;
	text-shadow: 0.1em 0.1em 0.2em rgba(30,30,30,1);
	/* background-image:url(../images/phone.png); */
	background-repeat: no-repeat;
	background-size: 335px 40px;	
	padding-left:0%;
}

img.cadre
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 5px 5px 10px black;
border:0px solid #FFFFFF;
margin:10px;
margin-right:30px;
}