/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

@font-face
{
font-family:"verdana";
src:url("fonts/verdana.ttf");
font-weight:200;
font-style:normal;
}

@font-face
{
font-family:"futura-medium";
src:url("fonts/FuturaStd-Medium_1.otf");
font-weight:200;
font-style:normal;
}

@font-face
{
font-family:"futura-light";
src:url("fonts/FuturaStd-Light_1.otf");
font-weight:200;
font-style:normal;
}

@font-face
{
font-family:"futura-book";
src:url("fonts/FuturaStd-Book_1.otf");
font-weight:200;
font-style:normal;
}

@font-face
{
font-family:"futura-black";
src:url("fonts/FuturaStd-Heavy_1.otf");
font-weight:200;
font-style:normal;
}



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
	font-size:16px;
	margin: 10px 50px 50px 50px;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* -------------------*/


/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/*#titre-site a{
   
    font-family:"graphicopolis";
    font-size: 100px;
    font-style:normal;
    letter-spacing:0;
    text-align:center;
    text-decoration:none;
    margin-top: 20px;
    margin-bottom: 40px;
	color: #fd0000;
	display: block;
	margin: 0 auto;
}*/
#titre-site {
	height: 135px;
}
#titre-site img{
	width: 35%;
	margin:0 auto 0 auto;
	display:block;
	}

#container { 
	margin-left:200px;
	
	
}

h2{font-family:"futura-book";
	font-size: 22px;
	line-height: 26px;
    font-style:normal;
	text-align: left

}

.page #container { 
	max-width:35%;
	position: absolute;
	left: 50%;
	margin-left: -17.5%
	
	
}
.page #container #pagecontent {
	margin-top: 40px;
	margin-bottom: 100px;
	font-family:"futura-book";
	font-size: 16px;
	line-height: 20px;
    font-style:normal;
	text-align: left;

}
.texteavecimages p { margin: 0 0 1em }
.texteavecimages img { width: 100% }


/*images page titre.html*/
/*typo_1*/
#typo_1 img {
display:block;
}


#typo_1 img#img2 {
    display: none;
}
 
#typo_1:hover img#img2 {
    display: block;
}
 
#typo_1:hover img#img1 {
    display: none;
}
/* typo_2*/

#typo_2 img {
display:block;
}


#typo_2 img#img2 {
    display: none;
}
 
#typo_2:hover img#img2 {
    display: block;
}
 
#typo_2:hover img#img1 {
    display: none;
}

/*typo_3*/

#typo_3 img {
display:block;
}


#typo_3 img#img2 {
    display: none;
}
 
#typo_3:hover img#img2 {
    display: block;
}
 
#typo_3:hover img#img1 {
    display: none;
}

/*typo_4*/

#typo_4 img {
display:block;
}


#typo_4 img#img2 {
    display: none;
}
 
#typo_4:hover img#img2 {
    display: block;
}
 
#typo_4:hover img#img1 {
    display: none;
}


/*fin typo*/


.page #container a {
	color:black; 
	text-decoration:underline
}



/*#nav.floatable{position:fixed;}*/


 #nav {
	 position:fixed; 
	 width: 150px;top: 0px; 
	 
	font-family:"futura-black";
    font-size: 18px;
	line-height: 22px;
    font-style:normal}
#nav > .nano-content {
	padding: 165px 0 150px;
}
#nav ul { list-style-type: none; padding: 0; margin:0}

#nav #contact  { margin: 1em 0 }
#nav a {color:black; text-decoration: none}


#nav a[href=".amuser"].actif,
#nav a[href=".amuser"].selected{color:#ffd504}
#nav a[href=".baliser"].actif,
#nav a[href=".baliser"].selected{color:#1cfd00}
#nav a[href=".commemorer"].actif,
#nav a[href=".commemorer"].selected{color:#1d00ff}
#nav a[href=".communiquer"].actif,
#nav a[href=".communiquer"].selected{color:#ec00ff}	
#nav a[href=".declarer"].actif,
#nav a[href=".declarer"].selected{color:#ff5f01}
#nav a[href=".detourner"].actif,
#nav a[href=".detourner"].selected{color:#00ff49}
#nav a[href=".informer"].actif,
#nav a[href=".informer"].selected{color:#ff3161}
#nav a[href=".inonder"].actif,
#nav a[href=".inonder"].selected{color:#00ffd8}	
#nav a[href=".interdire"].actif,
#nav a[href=".interdire"].selected{color:#f00}
#nav a[href=".intriguer"].actif,
#nav a[href=".intriguer"].selected{color:#ff9d00}	
#nav a[href=".mettre-en-valeur"].actif,
#nav a[href=".mettre-en-valeur"].selected{color:#01ac2c}
#nav a[href=".nommer"].actif,
#nav a[href=".nommer"].selected{color:#7400e7}
#nav a[href=".orienter"].actif,
#nav a[href=".orienter"].selected{color:#23eb57}
#nav a[href=".ornementer"].actif,
#nav a[href=".ornementer"].selected{color:#feb300}
#nav a[href=".poster"].actif,
#nav a[href=".poster"].selected{color:#ff0045}
#nav a[href=".promouvoir"].actif,
#nav a[href=".promouvoir"].selected{color:#47af00}
#nav a[href=".protester"].actif,
#nav a[href=".protester"].selected{color:#05bf93}
#nav a[href=".raconter"].actif,
#nav a[href=".raconter"].selected{color:#934bf7}
#nav a[href=".reparer"].actif,
#nav a[href=".reparer"].selected{color:#b60000}
#nav a[href=".signaler"].actif,
#nav a[href=".signaler"].selected{color:#ffff00}
#nav a[href=".situer"].actif,
#nav a[href=".situer"].selected{color:#5f57c1}



#contact {  
	font-family:"futura-light";
    font-size: 18px;
	line-height: 22px;
    font-style:normal}

#graphico {  
	font-family:"futura-light";
    font-size: 18px;
	line-height: 22px;
    font-style:normal}



.item { position: relative; display: block; float: left; margin: 20px }
.item.graphicopolis { position: relative; display: block; float: left; margin: 120px 20px }

.item img { width:100%; display: block}



.item:after {
	content:' ';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
	opacity:0;
	
	/*transition: opacity 200ms linear*/
	}

.item:hover:after {
	opacity:0.4
}




.item.amuser:after {background: #ffd504}
.item.baliser:after {background: #1cfd00}
.item.commemorer:after {background: #1d00ff}
.item.communiquer:after {background: #ec00ff}
.item.declarer:after {background: #ff5f01}
.item.detourner:after {background: #00ff49}
.item.informer:after {background: #ff3161}
.item.inonder:after {background: #00ffd8}
.item.interdire:after {background: #f00}
.item.intriguer:after {background: #ff9d00}
.item.mettre-en-valeur:after {background: #01ac2c}
.item.nommer:after {background: #7400e7}
.item.orienter:after {background: #23eb57}
.item.ornementer:after {background: #feb300}
.item.poster:after {background: #ff0045}
.item.promouvoir:after {background: #47af00}
.item.protester:after {background: #05bf93}
.item.raconter:after {background: #934bf7}
.item.reparer:after {background: #b60000}
.item.signaler:after {background: #ffff00}
.item.situer:after {background: #5f57c1}



.filtred .item:after {background: none}










/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 800px) {
	#nav {position: static; float: left}
	#titre-site {padding-left: 35%; width: 100%;}
	#titre-site img {width:100%; margin: 0 0 20px 0}
	#container { margin-left: 0}
}


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

}










/* ==========================================================================
   NANO scroller
   ========================================================================== */


/** initial setup **/
.nano {
  position : relative;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.nano > .nano-content {
  position      : absolute;
  overflow      : scroll;
  overflow-x    : hidden;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
}
.nano > .nano-content:focus {
  outline: thin dotted;
}
.nano > .nano-content::-webkit-scrollbar {
  visibility: hidden;
}
.has-scrollbar > .nano-content::-webkit-scrollbar {
  visibility: visible;
}