html, body {
    margin: 0;
    padding: 0;
	background-color:#ffffff;
}

html{
	/*background:url('images/fondecran.png') 50% 0% no-repeat;*/
	background-color:#ffffff;

}

body {
  color:black;
  font:cursive;
  font-family:arial;
  font-size:12px;
  text-align: justify;
  /*cursor: url('images/curseur/curseur.cur') 48 0, pointer;*/
}

h1 {
    font-size: 15px;

    text-align: center;


}

#pp a:link, #pp a:visited, #pp a:active, #pp a:hover{
	cursor:default;
}

p,ul,li,td {
    color: black;
}

ul{
	margin:0;
	padding:0;
}

img{
	border:none;
	/*cursor: url('images/curseur/curseur.cur') 48 0, pointer;*/
}

@font-face {
  font-family: 'jayfreres';
  src: url('font/jayfreres.eot');
  src: url('font/jayfreres.woff') format('woff'),
        url('font/jayfreres.svg#abcd') format('svg'),
  		 url('font/jayfreres.ttf') format('truetype');
}
/*
#pp a{
  margin: 20px;
}*/

a:link {
    color: black;
    text-decoration: none;
	/*cursor: url('images/curseur/curseur.cur') 48 0, pointer;*/
}
a:visited {
    color: black;
}
a:active {
    color:black;
}
a:hover {
    color:#d50330;
    text-decoration: none;
}

a.nonsouligne:link {
	text-decoration:none;
	color: black;
}
a.nonsouligne:visited {
    color: black;
}
a.nonsouligne:active {
    color:black;
}
a.nonsouligne:hover {
    color:#d50330;
    text-decoration: none;
}

a.poker:link {
	text-decoration:none;
	color: white;
}
a.poker:visited {
    color: white;
}
a.poker:active {
    color:white;
}
a.poker:hover {
    color:#grey;
    text-decoration: none;
}

a.pp:link {
	text-decoration:none;
	color: black;
	cursor:default;
}
a.pp:visited {
    color: black;
    cursor:default;
}
a.pp:active {
    color:black;
    cursor:default;
}
a.pp:hover {
    color:#grey;
    text-decoration: none;
    cursor:default;
}

#logo{
	/*background:url('images/logo2.png') 50% 50% no-repeat;*/
	width:50%;
	margin-left:4%;
	height:100px;
	float:left;
}

#logo h1 {
  font-size: 36px;
}

#coordonnee{
	float:left;
	margin-top:20px;
	width:46%;
	font-size:15px;
	line-height:17px;
	padding-right:0%;
	text-align:center;
	color:black;
}
#logo2{
	background:url('images/bouteille.png') 50% 50% no-repeat;
	width:20%;
	margin-right:3%;
	height:100px;
	float:left;
}
#boutonacf{
	/*background:url('images/background.jpg') 50% 50% no-repeat;*/
	position:absolute;
	margin:-2px 80px 140px -400px;
	width:800px;
	left:50%;
	height:100px;
	opacity:0.95;
	border:solid 2px black;
	background-color:rgba(255,255,255,1);
	border-radius:0 0 50px 50px;
}

#slogan{
	position:absolute;
	margin:150px 80px 140px -400px;
	width:800px;
	left:50%;
	height:100px;
	font-size:25px;
	text-align:center;
	color:white;
	text-shadow:0 0 1px black, 3px 3px 5px #505050;
}



#page{
	margin-left: auto;
    margin-right: auto;
	width:100%;
}
#texte {
	position:absolute;
	height:auto;
	margin:110vh 0px 0 0;
	padding:0px;
	width:100%;
	text-align:justify;
	color:black;
	cursor:default;
	-webkit-animation: pp 322s ease 0s forwards;
	-moz-animation: pp 322s ease 0s forwards;
	-ms-animation: pp 322s ease 0s forwards;
	-o-animation: pp 322s ease 0s forwards;
	animation: pp 322s ease 0s forwards;
}
#bandeautexte{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
}
#diapo{
	position:absolute;
	margin-top:265px;
	width:960px;
	height:265px;
	background-color:rgba(0,0,0,1);

}
#clic a{
	position:absolute;
	width:100%;
	height:1080px;
	z-index:1000;
}

/*#pp{
	font-size:15px;
	line-height:15px;
}*/



#entrer a{
	display:block;
	position:absolute;
	text-align:center;
	top:50vh;
	margin:-158px 0 0 -158px;
	width:316px;
	height:316px;
	left:50%;
	background:url('images/entrer.png') 50% 50% no-repeat;
	background-size:316px auto;
	transition:background-size 0.1s;
}
#entrer a:hover{
	background-size:300px auto;
}

#blocmentions{
	width:96%;
	margin:450px 1% 1% 1%;
	background-color:rgba(255,255,255,0.8);
	padding:1%;
	height:auto;
	border:solid 2px black;
}

#entrermentions a{
	display:block;
	position:absolute;
	text-align:center;

	margin:120px auto 0 -158px;
	width:316px;
	height:316px;
	left:50%;
	background:url('images/entrer.png') 50% 50% no-repeat;
	background-size:316px auto;
	transition:background-size 0.1s;
}
#entrermentions a:hover{
	background-size:300px auto;
}

@media (max-width: 800px) {
	.pp {
    margin:20px;
    display: block;
    font-size: 1rem;
  }
  	#blocmentions{
	width:96%;
	margin:220px 1% 1% 1%;
	background-color:rgba(255,255,255,0.8);
	padding:1%;
	height:auto;
	border:solid 2px black;
}

#slogan{
	position:absolute;
	margin:230px 80px 140px -400px;
	width:800px;
	left:50%;
	height:100px;
	font-size:25px;
	text-align:center;
	color:white;
	text-shadow:0 0 1px black, 3px 3px 5px #505050;
}
  	#boutonacf{
		position:absolute;
		margin:-2px -2px 0px -2px;
		width:100%;
		left:0%;
		height:230px;

		opacity:0.95;

		border:solid 2px black;
		/*background:url('images/logo.png') 50% 0% no-repeat;*/
		background-size:auto 200px;
		background-color:rgba(255,255,255,1);
		border-radius:0 0 100px 100px;
	}
  	#logo{
		/*background:url('images/logo2.png') 50% 50% no-repeat;*/
		background-size:auto 100px;
		width:100%;
		height:100px;
		float:left;
		margin-left:0;
	}
	#logo2{
		display:none;
	}
	#coordonnee{
		float:right;
		margin-top:20px;
		width:96%;
		font-size:12px;
		line-height:17px;
		padding:0% 2%;
		text-align:center;
		color:black;
	}
	#entrer a{
		display:block;
		position:absolute;
		text-align:center;
		top:60vh;
		margin:-125px 0 0 -125px;
		width:250px;
		height:250px;
		left:50%;
		background:url('images/entrer.png') 50% 50% no-repeat;
		background-size:250px auto;
		transition:background-size 0.1s;
	}
	#entrer a:hover{
		background-size:240px auto;
	}
	#blocmentions{
		width:96%;
		margin:400px 0% 1% 2px;
		background-color:rgba(255,255,255,0.8);
		padding:1%;
		height:auto;
		border:solid 2px black;
	}

	#entrermentions a{
		display:block;
		position:absolute;
		text-align:center;
		margin:220px auto 0 -79px;
		width:158px;
		height:158px;
		left:50%;
		background:url('images/entrer.png') 50% 50% no-repeat;
		background-size:158px auto;
		transition:background-size 0.1s;
	}
	#entrermentions a:hover{
		background-size:150px auto;
	}
}


@-webkit-keyframes pp{
	from { opacity: 0; filter: alpha(opacity = 0); -moz-opacity: 0; }
	99% { opacity: 0; filter: alpha(opacity = 0); -moz-opacity: 0; }
	to { opacity: 1; filter: alpha(opacity = 100); -moz-opacity: 1; }
}
@-moz-keyframes pp{
from { opacity: 0; filter: alpha(opacity = 0); -moz-opacity: 0; }
	99% { opacity: 0; filter: alpha(opacity = 0); -moz-opacity: 0; }
	to { opacity: 1; filter: alpha(opacity = 100); -moz-opacity: 1; }
}
@-ms-keyframes pp{
from { opacity: 0; filter: alpha(opacity = 0); -moz-opacity: 0; }
	99% { opacity: 0; filter: alpha(opacity = 0); -moz-opacity: 0; }
	to { opacity: 1; filter: alpha(opacity = 100); -moz-opacity: 1; }
}
@-o-keyframes pp{
from { opacity: 0; filter: alpha(opacity = 0); -moz-opacity: 0; }
	99% { opacity: 0; filter: alpha(opacity = 0); -moz-opacity: 0; }
	to { opacity: 1; filter: alpha(opacity = 100); -moz-opacity: 1; }
}
@keyframes pp{
from { opacity: 0; filter: alpha(opacity = 0); -moz-opacity: 0; }
	99% { opacity: 0; filter: alpha(opacity = 0); -moz-opacity: 0; }
	to { opacity: 1; filter: alpha(opacity = 100); -moz-opacity: 1; }
}

#mentions {
  color: white;
  left: 10%;
  position: absolute;
  text-shadow: 0 0 1px black,0 0 2px black,0 0 3px black,0 0 5px black,0 0 10px black;
  top: 88vh;
}
#mentions a{
	color:white;
}

#asco a{
	position:absolute;
	top:90vh;
	right:10%;
	width:125px;
	height:45px;
	margin:3px 0 2px 6%;
	background:url('./images/asco-blanc-transparent.png') 50% 50% no-repeat;
}
#asco a:hover{

	background:url('./images/asco-noir.png') 50% 50% no-repeat;
}