div#content
{
	background-image:none;
}

div.lnki
{
	background-color:#FFF;
	color:#000;
	padding:5px;
	margin:10px;
	width:200px;
	border-radius:3px;
	display:inline-block;
}
a:hover div.lnki
{
	color:#FFF;
	background-color:#000;
}

h1
{
	height:100%;
	margin:0px;
	padding:0px;
	text-transform: uppercase;
	font-family:Proxima;
}

div.btnprog
{
	border:solid 1px #000;
	padding:10px;
	margin:10px;
	text-align:center;
	display:inline-block;
	border-radius:10px;
	background-color:#a3e3d4;
	box-shadow:inset 0px 5px 5px #EEE, inset 0px -5px 5px #9C9;
}

div.btnprog:hover
{
	background-color:#A1F3B3;
}

a:active div.btnprog
{
	background-color:#A1F3B3;
	box-shadow:inset 0px 5px 5px #9C9, inset 0px -5px 5px #EEE;
}

div#h1
{
	width:40vw;
	margin:0px;
	padding:20px;
	z-index:2;
	text-align:center;
	font-family:Proxima;
	text-transform: uppercase;
	float:left;
}

div#h1 div#numero
{
	font-size:20vw; 
	font-weight:bold;
	line-height:11vw;
}

div#h1 div#date
{
	font-size:2.5vw;
	color:#23BCEC;
	text-transform:uppercase;
	text-shadow:0px 5px 10px #000;	
}

div#h1 div#tp1
{
	font-size:6vw
}

div#h1 div#tp2
{
	font-size:3.6vw
}

div#h1 div#tp3
{
	font-size:2.5vw
}

div#h1 div#numero sup
{
	font-size:10%; 
	vertical-align:text-top; 
	position:relative; 
	font-weight:bold; 
	text-transform:lowercase; 
	top:3vw;
}

a.versp2
{
	text-decoration:none;
}

div.versp2
{
	color:#FFFFFF;
	font-size:2vw;
	margin-left:15px;
	text-align:center;
	background:linear-gradient(#005bbc 50%, #ffd600 50%);
	margin-left:10%;
	margin-right:10%;
}

div.versp2 p
{
	padding:4px;
	border:1px #FFFFFF solid;
}

div.versp2 img
{
	width:250px;
	margin-top:-10px;
}

div#introduction
{
	position:absolute;
	bottom:130px;
	width:100%;
	text-align:right;
}

div#introduction img#texte
{
	margin-right:100px;
}

div#dates
{
	color:#6f6;
	background-color:#010;
	border-top:solid 1px #060;
	border-bottom:solid 1px #060;
	text-align:center;
	top:80px;
	left:25vw;
	width:50%;
	margin-right:auto;
	margin-left:auto;
	font-size:30px;
	text-transform:uppercase;
}

div#rdv
{
	background-color:#000;
	color:#FFF;
	padding:20px;
	text-align:center;
	position: absolute;
	top: calc(100%);
	width: 100%;
	-webkit-transform: translateY(-100%);
    transform: translateY(-100%);
	font-size:25px;
}
div#rdv a
{
	color:#FFF;
}

div#p2
{
	position:relative; 
	margin-top:-100px; 
	margin-bottom:100px; 
	top:0px;
}

div#content
{
/*	background-image:url(/images/index/fond-index-festival-astronomie-fleurance-2024-saturne.png), url(/images/index/fond-index-festival-astronomie-fleurance-2024-infini.png), url(/images/index/fond-index-festival-astronomie-fleurance-2024.jpg);*/
}

div#partie_1
{
	background-image:url(/images/Roll-Up-2.jpg);	
	background-size:contain;
	background-position:top center;
	background-repeat:no-repeat;
	overflow:hidden;
	height:100vh;
}

div#dates a
{
	color:#FFF;
}

img#affiche
{
	position:absolute;
	left:0;
	z-index:0;
}

div#partie_2

{
	overflow:hidden;
	height:calc(100vh - 130px);
	width:100%;
	min-width:910px;
	min-height:560px;
	background-color:#000;
}


div#partie_2 h2

{
	color:#FFFFFF;
	text-transform:uppercase;
	margin:0px;
}

/*

div#partie_2 div.limites

{

	width:1100px;

	margin-left:auto;

	margin-right:auto;

	color:#000000;

}

*/

div#partie_2 a
{
	text-decoration:none;
	color:inherit;
}

div#content div#partie_2 a div.carbonne
{
	padding:25px;
	background-color:#E7007B;
	color:#FFF;
	text-align:center;
	font-size:25px;
	text-transform: uppercase;
	font-weight:bold;
}

div.article
{
	position:relative;
}

div.article div.images ul
{
	text-align:left;
	list-style-position:inside;
	padding:0px;
	margin:0px;
	font-size:15px;
	font-weight:bold;
}

div.article div.images li
{
	padding:5px;
	background-color:rgba(0,0,0,0.5);
}

div.article div.images a:hover li
{
	background-color:rgba(255,255,255,0.5);
	color:#000;
}

div.article div.images p
{
	padding:45px;
	font-size:15px;
	font-weight:bold;
	margin:0px;
	background-color:rgba(0,0,0,0.5);
}

div.article div.images h2
{
	padding:20px;
	margin:0px;
	font-size: 20px;
    text-transform: uppercase;
	background-color:rgba(0,0,0,0.5);
}

div.texte
{
	float:left; 
	width:40%;
	padding:5px;
	display:none;
	background-size:80%;
	background-position:center 1%;
	background-repeat:no-repeat;
	height:100%;
	padding-top:35%;
}

 div#partie_2 a:hover div.article div.texte
{
	display:inline;
}

div.images
{
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display:inline-block;
	float:left;
	overflow:hidden;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}



div.triangle
{
	z-index:2;
	position:absolute;
	right:0;
	bottom:0;
	margin:0px;
	width:300px;
	height:200px;
}

div.triangle p.droite
{
	margin-right:30px;
}

div.triangle p
{
	z-index:3;
	position:absolute;
	right:0;
	bottom:0;
	margin:0px;
	margin-bottom:10px;
	padding-right:50px;
	font-size:20px;
	text-transform:uppercase;
	text-align:right;
	width:260px;
	text-shadow: 1px 1px 3px #000;
	background-image:url(/images/icones/fleche-blanche-droite.png);
	background-repeat:no-repeat;
	background-position:right center;
}

div.triangle p sup
{
	font-size:50%;
}



div#partie_2 img.illustration

{

	position:absolute;

	z-index:1;

	top:0;

	left:0;

}



div#partie_2 a:hover img.illustration 

{

	height:100% !important;

	width:auto !important;

	margin:0px;

}



img.icone

{

	margin-top:20px;

}



img.fleches

{

	position:absolute;

	bottom:6px;

	right:0;

}



div.baniere, div.bouton
{
	padding:15px;
	font-size:15px;
	margin:0px;
	display:inline-block;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	border-radius:10px;
}

div.bouton
{
	width:49%;
	margin:5px;
}

div#partie_2 div.baniere div
{
	margin-top:-15px;
}

div.baniere h2
{
	text-transform:uppercase;
	font-size:25px;
	margin:10px;
}

div.center
 { 
	padding:10px; /* aération interne de la zone de texte */

}

div.tier
{
	width:25%;
	height:calc(50% - 76px);
	display:inline-block;
	margin:-2px;
	padding:0px;
	overflow:hidden;
	min-width:225px;
	min-height:200px;
}


div#partie_3
{
	padding:50px;
	width:80%;
	height:1000px;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
}



div.quart

{

	width:22%;

	min-width:200px;

	height:100%;

	float:left;

	margin:1%;

}



div#webtv, div#supports

{

	width:46%;

	min-width:200px;

	height:40%;

	float:left;

	margin:1%;

	text-transform:uppercase;

	text-align:left;

	font-size:20px;
	padding:20px;
	background-color:#000;
}



div#webtv

{

	border-bottom:1px solid #FFFFFF;

}



div#webtv div.spacer, div#supports div.spacer
{
	height:100%;
	width:100px;
	float:left;
}

div#webtv h2, div#supports h2
{
	font-size:30px;
	margin:0px;
}

div#partie_3 a
{
	color:#FFFFFF;
	text-decoration:none;
}

div.fb

{
	width:300px;
}

img.btnvideo
{
    float: right;
    vertical-align: middle;
    margin-right: 60px;
}

div.fice32
{
	padding:10px;
	margin-left:200px;
	margin-right:150px;
	background-color:#DF0E0E;
}

div#enconstruction
{
	margin:100px;
	font-size:30px;
	padding:30px;
	background:#FFF;
	color:#000;
	border-radius:30px;
}

@media only screen and (max-width: 650px)
{
	div.baniere
	{
		width:90%;
	}
	
	div#enconstruction
	{
		font-size:20px;		
	}
	
	div.quart
	{
		width:100%;
		float:none;
		margin:1px;
		margin-left:auto;
		margin-right:auto;
		height:400px;
	}
	
	div#webtv, div#supports
	{
		width:100%;
		float:none;
		margin:1px;
		margin-top:10px;
		padding:10px;
		height:auto;
	}
		
	h1
	{
		height:100%;
		margin:0px;
		padding:0px;
		text-transform: uppercase;
		font-family:Proxima;
	}

	div#h1
	{
		width:100%;
		margin:0px;
		padding:0px;
		text-align:center;
		font-family:Proxima;
		text-transform: uppercase;
		float:none;
	}

	div#h1 div#numero
	{
		font-size:40vw; 
		font-weight:bold;
		line-height:25vw;
	}

	div#h1 div#date
	{
		font-size:4.9vw;
		color:#23BCEC;
		text-transform:uppercase;
		text-shadow:0px 5px 10px #000;	
	}

	div#h1 div#tp1
	{
		font-size:12vw
	}

	div#h1 div#tp2
	{
		font-size:7.2vw
	}

	div#h1 div#tp3
	{
		font-size:4.9vw
	}

	div#h1 div#numero sup
	{
		font-size:10%; 
		vertical-align:text-top; 
		position:relative; 
		font-weight:bold; 
		text-transform:lowercase; 
		top:3vw;
	}
	
	div#introduction
	{
		margin-top:0;
		text-align:center;
	}
	
	img#titre
	{
		width:70%;
		margin-top:20px;
	}
	
	div#dates
	{
		font-size:25px;
		margin:0px;
		width:100%;
	}
	
	div#introduction img#texte
	{
		width:80%;
		bottom:200px;
		margin:20px;
	}
}

@media only screen and (max-width: 500px)
{
	div#partie_1
	{
	}
	
	div.fice32
	{
		padding:5px;
		margin:5px;
		margin-left:270px;
		margin-right:50px;
		font-size:20px;
	}
	
	div.versp2
	{
		color:#FFFFFF;
		margin-left:15px;
		text-align:center;/*
		font-size:6vw;
		background-color:#3ab9ff;
		height:310px;
		width:310px;
		border-radius:50%;*/
		margin:5px;
		margin-left:auto;
		margin-right:auto;
	}

	div.versp2 p
	{
	/*	background-color:transparent;
		padding-top:100px;
	
	*/
		padding:0px;
		margin:0px;
		border:none;
		font-size: 5vw;
	}

	div.versp2 img
	{
		width:150px;
	}
	
	div#content
	{
		margin-top:100px;
	}
	
	div#partie_2
	{
		height:auto;
		min-width:0px;
	}
	
	div.tier
	{
		width:100%;
		min-width:0px;
	}

	div.triangle
	{
		position:static;
		width:auto;
		text-align:right;
	}
	
	div#partie_2 div.images{
		width:100%;
	}
	div#partie_2 a:hover div.article div.texte
	{
		display:none;
	}
	
	div#partie_2 a:hover div.article div.images
	{
		width:100%;
	}

	div#partie_3 img
	{
		width:100%;
	}
	
	div#partie_3
	{
		min-width:0px;
		padding:0;
		height:600px;
	}
	
	div#presentation
	{
		top:initial;
		left:initial;
		right:0;
		bottom:0;
	}
	
	div.fb
	{
		margin-bottom:10px;
	}
	
	div.twitter-timeline
	{
		margin-left:auto;
		margin-right:auto;
	}
}