@charset "utf-8";
/* CSS Document */
* {outline: none;}

   .container {
		margin:0 auto;
		width:300px;
		}


html{
font-family: "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; font-size:1.2em;    }

body { margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	}
	
#page{
	height:38.5em;
	display:block; position:relative; top:0;
background:-webkit-linear-gradient(rgba(219,218,218,0.6),rgba(219,218,218,0.1));
background: -moz-linear-gradient(rgba(219,218,218,0.6),rgba(219,218,218,0.1));
background: -ms-linear-gradient(rgba(219,218,218,0.6),rgba(219,218,218,0.1));
background: -o-linear-gradient(rgba(219,218,218,0.6),rgba(219,218,218,0.1));
background: linear-gradient(rgba(219,218,218,0.6),rgba(219,218,218,0.1));
}


#enveloppe{
	
	margin: auto auto;
	width:56em;

	padding-top:1em;
}
#home{margin:1em 1em;}
#home span{ text-align:center; font-size:0.8em; margin:1em; display:none;}
#home:hover span{display:inline;}

.accordeon{ position:fixed; top:1em;  width:18em; height:37em;  


}

.accordeon img{-webkit-transition:all .6s ease-in;
    -moz-transition: all .6s ease-in;
    -o-transition: all .6s ease-in;
	-ms-transition: all .6s ease-in;
    transition: all .6s ease-in;}

#actu, #philo, #prod, #contact, #equipe, #quid{ width:18em; height:18em;  background:rgba(219,218,218,0.1);border-radius:1em; 


}

#actu:hover, #philo:hover, #prod:hover, #contact:hover, #equipe:hover, #quid:hover{background:rgba(219,218,218,0.5); -webkit-transform: scale(1.05); 

-webkit-transition:all .6s ease-in;
    -moz-transition: all .6s ease-in;
    -o-transition: all .6s ease-in;
	-ms-transition: all .6s ease-in;
    transition: all .6s ease-in;  }

#actu{position:absolute; }
#philo{position:absolute; margin-left:19em;}
#contact{ position:absolute; margin-left:38em;}
#prod{position:absolute; margin-left:19em; margin-top:19em;}
#equipe{position:absolute; margin-left:38em;margin-top:19em;}
#quid{ position:absolute;margin-top:19em;}


.menu{ width:13em; font-weight:bold; padding-left:0.5em;  margin-top:0; height:2em; line-height:2em; font-size:1em; text-transform:uppercase; color:rgba(0,0,0,0.8);}

.sous-menu{ width:13em; margin-left:1em; margin-top:-0.5em; padding-left:1em;
background:-webkit-linear-gradient(left,rgba(219,218,218,0.1),rgba(219,218,218,0));
background: -moz-linear-gradient(left,rgba(219,218,218,0.1),rgba(219,218,218,0));
background: -ms-linear-gradient(left,rgba(219,218,218,0.1),rgba(219,218,218,0));
background: -o-linear-gradient(left,rgba(219,218,218,0.1),rgba(219,218,218,0));
background: linear-gradient(left,rgba(219,218,218,0.1),rgba(219,218,218,0));

box-shadow:1px 0 0 rgba(219,218,218,0.15) inset;				}


li{ display:block; margin:0.3em -3em;
font-size:0.8em;



}

.sous-menu li:hover{ background:-webkit-linear-gradient(left,rgba(219,218,218,0.5),rgba(219,218,218,0));
background: -moz-linear-gradient(left,rgba(219,218,218,0.5),rgba(219,218,218,0));
background: -ms-linear-gradient(left,rgba(219,218,218,0.5),rgba(219,218,218,0));
background: -o-linear-gradient(left,rgba(219,218,218,0.5),rgba(219,218,218,0));
background: linear-gradient(left,rgba(219,218,218,0.5),rgba(219,218,218,0));
}

a{text-decoration:none; color:rgba(0,0,0,0.53);}
a:focus{background:rgba(219,218,218,0.5); }

h10{font-size:1.2em; font-weight:500;  font-variant:small-caps;}

#actu img, #philo img, #contact img, #prod img, #equipe img, #quid img{ position:absolute; width:30%; bottom:1.5em; right:1.5em; 

-webkit-transition: width .6s ease-in;
    -moz-transition: width .6s ease-in;
    -o-transition: width .6s ease-in;
	-ms-transition: width .6s ease-in;
    transition: width .6s ease-in;

}


#actu:hover>img, #philo:hover>img, #prod:hover>img, #contact:hover>img, #equipe:hover>img, #quid:hover>img{ /*
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);

filter: grayscale(100%);*/


width:40%;}

.sous-menu>img{ width:50%;
}

.sous-menu:hover> img{}

#radio, #tel{ cursor:pointer;}

/*contenu*/

#wrap-zoom{width:15em; margin-left:23em; padding-top:3.3em;}
#produire{width:21em; float:left;}
#enveloppe-contenu{margin-left:18em; width:38em; height:auto; }
.contenu{margin-left:0em; width:38em; height:37em; font-family: Candara, sans-serif; }
.contenu h{font-size:2em; font-weight:bold; }
.contenu a { padding-left:2em;}
.contenu a:hover, .contenu a:focus{
	background-image: url(img/arc-mini.png);
	background-repeat: no-repeat;
	background-position: 10px; 
	text-decoration: underline ;
	}
	

#zoom{ font-style:italic; color:rgba(0,0,0, 0.7); font-size:0.75em;
}
#zoom:hover{font-size:0.85em;
	font-weight:bold;
	
	}
	
.contenu #no-link a:hover{background-image:none; text-decoration:none;}
#qui ul li a{font-size:1.2em;}
#qui ul li a:hover{background-image: url(img/arc-mini.png);
	background-repeat: no-repeat;
	background-position: 0px;}
#qui ul{padding-left:2.5em;}
#qui h{font-size:1.2em;}

#crea-presentation{font-size:0.7em; }

#voiroci{ width:180px; margin-left:200px; margin-top:100px;  
padding:1em;
background:rgba(219,218,218,0.1);

border: dashed 2px rgba(219,218,218,0.5) ;

		}
#voiroci>img{width:80%;}

#dashed{}

#copyright{margin-top:38em; margin-left:auto; margin-right:auto; width:800px}
	
	@media (min-height:800px){
#enveloppe{
	
	margin: auto auto;
	width:56em;

	padding-top:4em;
}
.accordeon{ position:fixed; top:4em;  width:18em; height:37em;  


}

}

   @media (max-width:1200px){
	   html{ background:#eee;}
#page{ background:none;}
	  
      #enveloppe{
	
	margin: auto auto;
	width:42em;

	padding-top:1em;
} 
#enveloppe-contenu{ margin-left:18em; width:19em; height:auto; }
.contenu{margin-left:0em; width:22em; height:auto; font-family: Candara, sans-serif; }
 .accordeon{ position:fixed; top:1em;  width:18em; height:37em;  


}
#produire{float:none; width:22em;}
#wrap-zoom{margin:0 0; padding:0.5em; width:22em;border-top: dashed 2px rgba(219,218,218,0.5) ; }
	
   }


   @media (max-width:900px){
	   html{ background:#eee;}
#page{ background:none;}
	  
      #enveloppe{
	
	margin: auto auto;
	width:38em;

	padding-top:1em;
} 
#enveloppe-contenu{ margin-left:18em; width:15em; height:auto; }
.contenu{margin-left:0em; width:18em; height:auto; font-family: Candara, sans-serif; }
 .accordeon{ position:fixed; top:1em;  width:18em; height:37em;  
}

#produire{float:none; width:18em;}
#wrap-zoom{margin:0 0; padding:0.5em; width:18em;border-top: dashed 2px rgba(219,218,218,0.5) ; }	
   }
   
   @media (max-width:750px){
html{ background:#eee;}
#page{ background:none;}

#enveloppe{
	
	margin: auto auto;
	width:17em;
	

	padding-top:1em;
	margin-top:0em;
	
}
#enveloppe-contenu{ margin-left:0; width:auto; height:auto; }
.contenu{  margin-left:0; height:auto; width:17em;
 }
 .accordeon{  border-top: dashed 2px rgba(219,218,218,0.5) ; position:relative;  height:auto; padding-top:0.5em; width:18em; margin:auto auto;}
 
 #produire{float:none; width:17em;}
#wrap-zoom{margin:0 0; padding:0.5em; width:17em;border-top: dashed 2px rgba(219,218,218,0.5) ; }

#voiroci{display:none;}
#dashed{border-top: dashed 2px rgba(219,218,218,0.5) ;}	
   }
   


		 /* For smartphones */
   @media (max-width:480px){
	  
        
	
	  #actu, #philo, #prod, #contact, #equipe, #quid{ width:8em; height:8em;  background:rgba(240,239,239,1.00);border-radius:1em;
	  
	  }

#actu:hover, #philo:hover, #prod:hover, #contact:hover, #equipe:hover, #quid:hover{background:rgba(219,218,218,0.5); width:8em; height:8em;  }

#actu{position:absolute; }
#philo{position:absolute; margin-left:9em;}
#contact{ position:absolute; margin-left:0; margin-top:18em;}
#prod{position:absolute; margin-left:9em; margin-top:9em;}
#equipe{position:absolute; margin-left:9em; margin-top:18em;}
#quid{ position:absolute;margin-top:9em;}

#actu a, #philo a, #contact a, #prod a, #equipe a, #quid a{ display:none;}

#actu img, #philo img, #contact img, #prod img, #equipe img, #quid img{ position:absolute; width:50%; bottom:0.5em; right:0.5em; 
}
#prod span{display:none;

}
html{ background:#eee;}
#page{ background:none;}

#enveloppe{
	
	margin: auto auto;
	width:17em;
	

	padding-top:1em;
	margin-top:0em;
	
}
#enveloppe-contenu{ margin-left:0; width:auto; height:auto; }
.contenu{  margin-left:0; height:auto; width:17em;
 }
 .contenu img{ display:block; margin-left:auto; margin-right:auto; width:297px;}
 .accordeon{  border-top: dashed 2px rgba(219,218,218,0.5) ; position:relative;  height:auto; padding-top:0.5em; width:18em; margin:auto auto;}
 
#produire{float:none; width:17em;}
#wrap-zoom{margin:0 0; padding:0.5em; width:17em;border-top: dashed 2px rgba(219,218,218,0.5) ; }

#voiroci{display:none;}
#dashed{border-top: dashed 2px rgba(219,218,218,0.5) ;}

   }