/*general*/
 body {
    margin: 0px 0 0 0px;
	font-family: AvenirLTStd, Arial, Helvetica;
	font-size: 12px;
	background-size: 100%;
}


/*header, pour bandeaux si besoin*/
 header {
    position:fixed;
	top:0px;
	z-index: 999;
	background: white;
	width:100%;
	height:45px; 
	padding:0px 10px 0 20px;	 
   	list-style: none;
	font-size: 12px;
	line-height: 65px;
	border-bottom:1px black solid;
}


header a {
   	text-decoration:none;
  	color:black;
}


.clic header:active header:focus ~.nav
{
     display:block;
}


/*textproject*/
textproject
{ 
  width: 241px;;
padding:8px 30px 5px 20px;
position:absolute;
z-index: 997;
right: 0%;
background-color:white;
}


news
{ 
width: 25%;
padding:8px 30px 5px 25px;
margin-top:45px;
font-size:18px;
float: left;
}

	
/*nav*/
nav {
	position: fixed;
	z-index: 10000;
	right:3%;
	margin-top: 13px;	
	display: none;
	font-weight: bold;	
}


.nav
{
	font-weight: normal;
	margin-right:3em; 
	float: right;
	color: black;
	text-decoration: none;
	font-size:12px;
}


nav a {
   	text-decoration:none;
  	font-weight:lighter;
}


.view {
   	text-decoration:none;
  	color:black;
	font-weight:lighter;
}


nav a:hover, a:focus, a:active{
   font-weight: bold;
}


nav:hover 
{
     display:block;
	 color:red;
}

.survol nav:hover ~.nav
{
     display:block;
	  color:red;
}




/*div*/
div {
	width: 100%; 
}


div a {
   	text-decoration:none;
  	color:black;
}


/*contenu*/



#contenu {
   float: right;
   position: relative;
}


#contenu div {
  float:left; 
  display: inline-block;
}

	
/*récit*/	
.about {
font-weight: bold;
font-size: 80px;
position: absolute;
z-index:998;
padding :40px 10px 10px 20px;
max-width:75%;/*changer en petit ecran*/
	}

	
.orange{
color:orange;
font-weight:50px;
	}

	
.violet
{color:blueviolet;
	}
	
	.red
{color:red;
	}

	
.titre{
text-shadow: 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60;}
	
	
.citation
{font-size: 20px;
line-height: 0px; 
font-weight: initial}
	


/*video CERAMICS*/
video {
width: 118%;
    /*taille ref 1280x720*/
   /*min-height:275px;*/
}


#contenu div.video {
	position: relative;
	line-height: 0px;  
	overflow: hidden; 
}


/*images CERAMICS*/
#contenu > div > img{
   width: 100%;
   height: auto; 
}

#contenu div.img {
	position: relative;
	line-height: 0px;   
} 

#contenu div.piece {
line-height: 0px;
width :25%;   
} 


/*text*/  
.leg{
	position: absolute;
    z-index:997;
	padding: 8px 30px 4px 20px;	
	text-align: right;
	overflow: hidden;
	right: 0%;
	line-height:1.2em;
	letter-spacing: 0px;
	background-color:white;
	width:241px;
	bottom:1px;
	/*text-transform:uppercase;*/
}

.display
{
  /* display: none;*/
   background-color: inherit;
   font-size:10px;
}
 
 
 .name {
   font-size: 18px; 
}


.with {
	text-transform:none;
}

.detail{
	font-weight:bold;
	font-size: 10px;
	text-transform:none;
}

.italic{
	font-style : italic;	
}

.cap {
	text-transform:uppercase;
	}

.bold {
	font-weight: bold;
	}
	
	.blanc {
   color:white;
   
}
	
/*.alert{
	font-style : normal;
	font-weight:bold;
	color: blue;
	text-decoration: blink; 	
}*/


.survol img:hover ~.leg 
{
     display:block;
}


.clic img:active img:focus ~.leg 
{
     display:block;
}


.survol video:hover ~.leg 
{
     display:block;
}

.clic video:active video:focus ~.leg 
{
     display:block;
}


div .couple + p .leg {
	top: 35px;
}

@media screen and (max-width: 400px){
header {
	font-size: 40px;
	height:60px;
}
}

@media screen and (max-width: 725px){

.survol img:hover ~.leg 
{
     display:none;
}

.about{
	font-size: 60px;
	max-width:95%;
}
}


@media screen and (max-width: 990px)
{	
.about{
	max-width: 75%;
}

.leg {
	left:75%;
}

}


@media screen and (max-width: 1024px)
{

#contenu div.inv {
	display:none;
}

.backimg {
padding-bottom:0px;
}

}

/*header {
	font-size:28px;
	line-height: 0em;
}*/
}