/*#############################################################
Site par F. Saillard

#############################################################*/


* {
	margin: 0;
	padding: 0;
}

body {
	
	background: url(Arcus_vol_02.jpg) no-repeat center fixed ; 
    background-size:cover;
	 margin:0;
  padding:0;
   -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
	color: #543;
	font: normal 62.5% "Cantarell",sans-serif;
}



p,cite,code,ul {
	font-size: 1.2em;
	padding-bottom: 1.2em;
	text-align: justify;
}
h1 {
	font-size: 1.4em;
	margin-bottom: 4px;
	text-align: center;
}


h1,h2,h3 {
	color: #33CCFF;
	padding-top: 6px;
}

p
{
color: #FFFFFF;
font-size: 15px;
}


.container {
	margin: 0 auto;
	width: 1300px;
	padding-bottom :0px;
}


.header {
	background: url(gif.gif) repeat-x;
	height: 160px;
	margin: 0 auto;
	width: 1300px;
}

.title {
	padding: 10px;
	padding-left: 360px; 
}
.title h1 {
	color: #FFFFFF;
	font: normal 3.4em "Lucida Sans Unicode","Trebuchet MS",sans-serif;
}

/*placement du slide menu à gauche*/

.placementslide {
	
	float: left;
	
	
	}
	
	
	/*paragraphe presentation club*/
	
.paragraphe  {

filter:alpha(opacity=90); /* propriétaire IE */
-moz-opacity:0.90; /* propriétaire Firefox */
opacity:0.90; /* CSS3 */ 
background: #099 url(img/bgnavigation.gif) repeat-x;
font: bold 2.5em Verdana,sans-serif;
height: 250px;
width: 650px;
float: right;

margin-bottom : 15px;
margin-right : 0px;
padding: 15px;

border-radius: 7px 7px 7px 7px;
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.75);        
   -moz-box-shadow:0px 0px 10px rgba(0,0,0,0.75);
        box-shadow:0px 0px 10px rgba(0,0,0,0.75);

}

.imagetreuillee {

float: left;
margin-left: 25px;
}


/*paragraphe avec slider à l'intérieur*/

.paragraphe2  {

filter:alpha(opacity=90); /* propriétaire IE */
-moz-opacity:0.90; /* propriétaire Firefox */
opacity:0.90; /* CSS3 */ 
background: #099 url(img/bgnavigation.gif) repeat-x;
font: bold 2.5em Verdana,sans-serif;
height: 530px;
width: 1265px;
float: right;
margin-top: 15px;
margin-bottom : 15px;
margin-right : 0px;
padding: 15px;

border-radius: 7px 7px 7px 7px;
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.75);        
   -moz-box-shadow:0px 0px 10px rgba(0,0,0,0.75);
        box-shadow:0px 0px 10px rgba(0,0,0,0.75);
}



.videotreuillee  {

height: 230px;
width: 465px;
float: left;

}



.texte  {
font: bold 2.5em Verdana,sans-serif;
height: 230px;
width: 465px;
float: right;
padding: 15px;
}



/*boite menu à gauche avec slide = OK*/

ul:before{
content:"";
position:absolute;
z-index:100;
filter:alpha(opacity=40); /* propriétaire IE */
-moz-opacity:0.70; /* propriétaire Firefox */
opacity:0.70; /* CSS3 */ 
background:#099;
height:100%;
width:192px;
margin-top:-66px;
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.75);        
   -moz-box-shadow:0px 0px 10px rgba(0,0,0,0.75);
        box-shadow:0px 0px 10px rgba(0,0,0,0.75);
}

ul{
position:relative;
list-style:none;
width:182px;
padding:40px 0px;
margin-left:103px;
margin-top:26px;
}
ul li{
height:40px;
width:182px;
}
ul li a.menuLien{
position:absolute;
z-index:110;
font-weight:bold;
color:white;
font-size:1.5em;
padding-left:22px;
display:block;width:160px;height:40px;
text-decoration:none;
text-shadow:0px 0px 5px rgba(0,0,0,0.5);
letter-spacing:-1px;
}


/*la boite qui slide en bougeant vers la droite=ok*/
ul li div{
width:182px;height:220px;
padding:20px;padding-top:10px;
background:rgba(0,0,0,0.6);
overflow:hidden;
color:white;
position:absolute;top:-25px;left:0;z-index:50;
opacity:0;margin-top:10px;
-webkit-transition:1s left,1s width,1s opacity;
   -moz-transition:1s left,1s width,1s opacity;
     -o-transition:1s left,1s width,1s opacity;
        transition:1s left,1s width,1s opacity;
}

ul li:hover div{
left:197px; /*regle le decalage du slide à droite initialement 182*/
opacity:1;
width:276px; 
background:rgba(0,0,0,0.6);
}



ul li div h5{
	font-size:1.4em;
	color:#099;
	text-align:center;
		}



ul li div p{
	text-indent:15px;
	padding-top:10px;
	width:276px;
	overflow:hidden;
	font-size:1.4em;
	font-weight:normal;
	text-align:justify;
	}

ul li div p.lien{
	text-align:right;
	}
	
ul li div p.lien a{
	color:#c10;
	}

	
	/*fin de la boite à gauche avec slide = OK */
	
	
	/*css de la video dans le pragraphe2*/
	
	
	video { 
  
	margin-left:380px;
	margin-top: 215px;
    top: 80%;
    left: 80%;
    min-width: 60%;
    min-height: 60%;
    width: 750px;
    height: 450px;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url('') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.stopfade { 
   opacity: .5;
}

#polina { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.3);
  color: white;
  padding: 2rem;
  width: 33%;
  margin:2rem;
  margin-top:-677px; /*decale texte bas haut plus la valeur devient négative*/
  margin-right:5px;
  float: right;
  font-size: 1rem;
}
h1 {
  font-size: 1.5rem;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .3rem;
}
#polina button { 
  display: block;
  width: 80%;
  padding: .4rem;
  border: none; 
  margin: 1rem auto; 
  font-size: 1.3rem;
  background: rgba(255,255,255,0.23);
  color: #fff;
  border-radius: 3px; 
  cursor: pointer;
  transition: .3s background;
}
#polina button:hover { 
   background: rgba(0,0,0,0.5);
}

}
@media screen and (max-width: 500px) { 
  div{width:70%;} 
}
@media screen and (max-device-width: 800px) {
  html { background: url(//demosthenes.info/assets/images/polina.jpg) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}
	
	
	/*fin du css de la video dans prargaphe2*/
	
	
	
	
	
.auteur {
margin-top: 40px;
float: right;
margin-right: 386px;
	}
	

.main {
	clear: both;
	padding: 010px 12px 28px;
}




.content {
	padding-top: 2px;

		float: left;
	width: 68%;
}
.content .descr {
	color: #987E57;
	font-size: 1.1em;
	margin-bottom: 2px;
}
.content li {
	list-style: url(img/li.gif);
	margin-left: 18px;
}


.footer {
    clear: both;
	background: url(pied__page.png) repeat-x;
	height: 160px;
	width: 1300px;
	padding-top: 35px;
	float : bottom;
	}