/* CSS Trombone  */

article,  details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: 'Elsie Swash Caps', cursive; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; background-color: black; }

  

/* Le texte */
h1 { font-size: 25px;color: white; }
h2 { font-size: 6px; }
h3 { font-size: 12px; }
p {font-size: 15px; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

aside{ margin: 0.5em 0; padding: 0.5em 0; padding-left: 1em}

aside li {
   padding-right: 0.2em; 
    color: black
}

aside li h3 { font-size: 12px;color: black;font-family: monospace,serif; }
aside h4 { font-size: 20px;color: black; font-family: monospace,serif; }

aside p {padding-right: 1em; font-size: 12px; color: black;font-family: monospace,serif; }
 
 
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* pour google */
pre { display: block; background-color: #333; padding:10px; border-radius:5px;}
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string  - pink */
pre .kwd { color: #f0e68c; font-weight: normal }
pre .com { color: #87ceeb; font-style: italic } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type    - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff }    /* punctuation */
pre .pln { color: #fff }    /* plaintext */
pre .tag { color: #f0e68c; font-weight: normal } /* html/xml tag    - lightyellow */
pre .atn { color: #bdb76b; font-weight: normal } /* attribute name  - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal         - lightgreen */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre { background-color: none }
  pre .str, code .str { color: #060 }
  pre .kwd, code .kwd { color: #006; font-weight: normal }
  pre .com, code .com { color: #600; font-style: italic }
  pre .typ, code .typ { color: #404; font-weight: normal }
  pre .lit, code .lit { color: #044 }
  pre .pun, code .pun { color: #440 }
  pre .pln, code .pln { color: #000 }
  pre .tag, code .tag { color: #006; font-weight: normal }
  pre .atn, code .atn { color: #404 }
  pre .atv, code .atv { color: #060 }
}

*{
	font-family: 'Elsie Swash Caps', cursive;
}



pre, pre span{
	font-size: 14px;
	font-family: monospace,serif;
}


#header {
   position: absolute;
 
     margin-top: 20px;
    
    width:100%;
  
   
    z-index: 10;
   
  
}
#logo_container{
     position:absolute;
     cursor: pointer;
     width: 100%;
  top:70px;
  left:200px;
     z-index: 5;
}
.png{
    position:absolute;
    right:-80px;
    top:150px;
   z-index: 0; 
   opacity:0.5; 
    
}

   #nuage {
      width: 220px;
      height: 192px;
      background-image: url(../images/nuageEnfant1.png);
   position: relative;
      top:-50px;
      left: 650px;
      z-index: 500;
 
    }


    
#ascensorBuilding{
	overflow:hidden;
}

#ascensorBuilding section:first-child article h1 {
	font-size: 30px;
}

section{
overflow:auto;
box-shadow: inset 0 0 0px 5px rgb(0,0,0);
}

section article{
	margin-top: 40px;
	margin-bottom: 40px;
	padding: 20px;
}

#navigationMap{
	position: fixed;
      
	right:80px;
	bottom:30px;
	width: 200px;
	height:80px;
	z-index: 999;
         
}

#navigationMap ul li a{
	background: #04B4AE;
	height:40px;
	width: 40px;
	border-radius:2px;
	position: fixed;
}
#navigationMap .ascensorLink1{
 

cursor: pointer;
 
}





#navigationMap .ascensorLink2{
  
        cursor: pointer;
 
}

#navigationMap .ascensorLink3{

        cursor: pointer;

}

#navigationMap .ascensorLink4{

        cursor: pointer;

}

#navigationMap .ascensorLink5, #navigationMap  .ascensorLink6{

        cursor: pointer;

}

#navigationMap .ascensorLink6{

        cursor: pointer;
 
}

#navigationMap .ascensorLink7{

        cursor: pointer;
 
}

#navigationMap .ascensorLinkActive{
	
}

#navigationMap .ascensorLink1Active{
	  
}
#navigationMap .ascensorLink1:hover{
	
                opacity:0.5;
}


#navigationMap .ascensorLink2Active{

}
#navigationMap .ascensorLink2:hover{

                opacity:0.5;
}

#navigationMap .ascensorLink3Active{

}
#navigationMap .ascensorLink3:hover{
	
                opacity:0.5;
}

#navigationMap .ascensorLink4:hover{
	
                opacity:0.5;
}
#navigationMap .ascensorLink4:hover{
	 
                opacity:0.5;
}
#navigationMap .ascensorLink5:hover{
	  
                opacity:0.5;
}
#navigationMap .ascensorLink5:hover{
	
                opacity:0.5;
}

#navigationMap .ascensorLink6:hover{
	
                opacity:0.5;
}
#navigationMap .ascensorLink6:hover{
	
                opacity:0.5;
}
#navigationMap .ascensorLink7:hover{
	
                opacity:0.5;
}
#navigationMap .ascensorLink7:hover{
	
                opacity:0.5;
}

img.cdlien{
margin-top:100px;
margin-bottom: 15px;
    cursor: pointer;

}

img.cdlien:hover{
	
                opacity:0.8;
}


img.cdlienAccueil{
 position: absolute;
cursor: pointer;
z-index:100;
right:100px;
top:20px;

}

img.cdlienAccueil:hover{
	
                opacity:0.8;
				z-index:10000;
}


#navig
img.imageGauche{
	float:left;
	margin-right:20px;
}
img.trombone{
position:relative;
    cursor: pointer;

	float:right;

        border:3px solid #FFFFFF;
          -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
   border-radius:5px;     

   -moz-box-shadow: 0px 0px 10px #000;	
   -webkit-box-shadow: 0px 0px 10px #000; 
   border-radius: 10px; 
}

 
img.imageDroite{

    cursor: pointer;
    margin-bottom: 15px;
	float:right;
	margin-left:20px;
        border:3px solid #FFFFFF;
          -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
   border-radius:5px;     

   -moz-box-shadow: 0px 0px 10px #000;	
   -webkit-box-shadow: 0px 0px 10px #000; 
   border-radius: 10px; 
}
img.imageGroupe{
    cursor: pointer;
	float:right;
	margin-left:50px;
   margin-bottom: 15px;

   -moz-box-shadow: 0px 0px 10px #000;	
   -webkit-box-shadow: 0px 0px 10px #000; 
   border-radius: 10px; 
}
.imgBt:hover{
    
    opacity:0.5;
}
 .encart {
 margin-top: 150px;
 float:right;
 margin-right: 70px;
 
  width:220px;
  border:3px solid #FFFFFF;
   background-image: url(../images/texture_papier2.jpg);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
   border-radius:5px;     

   -moz-box-shadow: 0px 0px 10px #000;	
   -webkit-box-shadow: 0px 0px 10px #000; 
   border-radius: 10px; 
   opacity:0.8;   
   opacity:.8; /*mozilla firefox*/
}
.encart h4{
  	font-size: 18px;
        color:black;
	font-family: monospace,serif;  
    text-align: center;
}
.encart h3{
  	font-size: 12px;
        color:black;
	font-family: monospace,serif;  
    
}
 .encart li  { color: white; padding-left:-10px; }
 
 .encartContact {
     position: relative;
 margin-top: 150px;
 margin-left: 30%;
 width:30%;
   background-image: url(../images/texture_papier2.jpg);
  border:3px solid #FFFFFF;
  background-color: #85C4E4;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
   border-radius:5px;     
text-align:center;
   -moz-box-shadow: 0px 0px 10px #000;	
   -webkit-box-shadow: 0px 0px 10px #000; 
   border-radius: 10px; 
   opacity:0.5;   
   opacity:.8; /*mozilla firefox*/
}
 .encartContact li  { color: white; padding-left:-10px; }

.encartContact h4  { color: black;font-size: 14px; }

.encartContact a :hover {
    color:white;
	font-size: 15px;
	font-family: monospace,serif;
}
.encartContact a {
    
	font-size: 12px;
        color:black;
	font-family: monospace,serif;
}
.encartContact h3 {
    
	font-size: 12px;
        color:black;
	font-family: monospace,serif;
}
.encartParcours {
     position: relative;
 margin-top: 80px;
 margin-right: 70px;
 width:100%;
   background-image: url(../images/texture_papier2.jpg);
  border:3px solid #FFFFFF;
  background-color: #85C4E4;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
   border-radius:5px;     

   -moz-box-shadow: 0px 0px 10px #000;	
   -webkit-box-shadow: 0px 0px 10px #000; 
   border-radius: 10px; 
   opacity:0.5;   
   opacity:.8; /*mozilla firefox*/
}
 .encartParcours li  { color: white; padding-left:-10px; }

.encartParcours h4  { color: black; text-align: center; }


  .encartVideo {

  width:200px;
  height: 150px;
  border:3px solid #FFFFFF;
  background-color: #5A310C;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
   border-radius:5px;     
   opacity:.8; /*mozilla firefox*/
   -moz-box-shadow: 0px 0px 10px #000;	
   -webkit-box-shadow: 0px 0px 10px #000; 
   border-radius: 10px; 
   opacity:0.8;
}
.encartVideo h2 {
    top:100px;
    font-size: 15px;color: white; 
    
}



 #contenuApropos {
  position: absolute;
  margin-left: auto;
  width: 60%;
  top: 7em;
  left: 15%;
  padding-right: 18em;
  
}
#contenuApropos p{
font-size:18px;
	
 color:black;   
    
}
#contenuApropos h1{
font-size:25px;
	
 color:white;   
    
}
#contenu {
  position: absolute;
  margin-left: auto;
  margin-top: 120px;
  width: 60%;
  
  left: 5%;
  padding-right: 18em;
  
} 
  #droite {
  position: absolute;
  top: 4em;
  right: 8%;
  margin-left: 1px;
  width:250px;

      border:5px solid;
    -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
  border-radius:5px;     
      opacity:.8; /*mozilla firefox*/
            -moz-box-shadow: 0px 0px 10px #000;	
-webkit-box-shadow: 0px 0px 10px #000; 
}
#sectionAudio {
  position: absolute;
right:
    -100px;
 
  top: 0px;

 
  overflow: hidden;
  
}
#sectionAudio  object{

  overflow: hidden;
  
}
#sectionMedia {
  position: absolute;
  margin-left: auto;
  width: 70%;
  top: 100px;
  left: 10%;
  padding-right: 18em;
  padding-bottom: 5em;
  
}
#sectionMedia h2 {
    font-size: 15px;color: black;
    
}
#objets {
 border:8px solid;
    -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
  border-radius:5px;     
      opacity:.8; /*mozilla firefox*/
            -moz-box-shadow: 0px 0px 10px #000;	
-webkit-box-shadow: 0px 0px 10px #000; 
}

/*Accueil*/
#ascensorFloor1{
	      background-image: url(../images/decor_tibo.png);
               overflow: hidden;
  


      
}		
/*Accueil*/
#ascensorFloor2{
	 background-image: url(../images/decor_tibo.png);

}
/*Milo*/
#ascensorFloor3{
   
	 background-image: url(../images/decor_tibo_brun.jpg);
	  	
}

/*Mr trombone*/
#ascensorFloor4{
	   background-image: url(../images/decor_tibo_clair.jpg);

           overflow: auto;
}
/*Medias*/
#ascensorFloor5{
	   background-image: url(../images/decor_tibo_clair.jpg);
	  
}

#ascensorFloor6{
	 background-image: url(../images/decor_tibo.png);
	   	
}

#ascensorFloor7{
	  background-image: url(../images/decor_tibo.png);
	 
}

#ascensorFloor8{
	  background-image: url(../images/decor_tibo.png);
	  	
}


.twitter-share-button{
	position: fixed;
	z-index: 999999;
	top:20px;
	right:0px;
}

.fb-like,.fb_edge_widget_with_comment{
	position: fixed!important;
	z-index: 999999999;
	right:20px;
	top:50px;
}


@media only screen and (min-width: 35em) {
  

}

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } 
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}



#works {
   

   
}

#works .work {
	/* Voici le overflow:hidden qui permet de cacher les triangles et de ne les voir apparaitre que lorsqu'ils sont dedans la div */
    overflow: hidden;
    width:10px;
    height: 100px;
    border: 1px solid #222;
    cursor: pointer;
    position: relative;
    -moz-transition: all .6s; 
    -webkit-transition: all .5s; 
    -o-transition: all .6s; 
    transition: all .6s;
    float: left;
    margin-right: 20px;
	margin-bottom:50px;
}

#works .work:hover {
    border: 0px solid #FFF;
}

#works .work img {
    
}

#works .work .triangle-droite {
    background: url(../img/triangle-droite.png);
    width: 312px;
    height: 293px;
    position: absolute;
    /* Voici le décalage du triangle à droite lorsqu'on n'est pas en :hover */
    right: -312px;
    bottom: -293px;
    -moz-transition: all .6s; 
    -webkit-transition: all .6s; 
    -o-transition: all .6s; 
    transition: all .6s;
}

#works .work:hover .triangle-droite {
	/* Voici la position du triangle à droite lorsqu'on est en :hover */
    right: 0;
    bottom: 0;
}

#works .work .triangle-gauche {
    background: url(../img/triangle-gauche.png);
    width: 312px;
    height: 293px;
    position: absolute;
    /* Voici le décalage du triangle à gauche lorsqu'on n'est pas en :hover */
    left: -311px;
    top: -293px;
    -moz-transition: all .6s; 
    -webkit-transition: all .6s; 
    -o-transition: all .6s; 
    transition: all .6s;
}

#works .work:hover .triangle-gauche {
	/* Voici la position du triangle à gauche lorsqu'on est en :hover */
    left: -1px;
    top: -1px;
}

#works .work span {
    color: #FFF;
    text-transform: uppercase;
    font-size: 20px;
    text-align: center;
    position: absolute;
    /* Voici la position du span lorsqu'on n'est pas en :hover */
    top: 125px;
    left: -280px;
    font-family: 'Din';
    background: #222;
    padding-left: 70px;
    padding-right: 8px;
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    
     
    -o-transition: all .5s; 
    transition: all .5s;
}

#works .work:hover span {
	/* Voici la position du span lorsqu'on est en :hover */
    left: 0px;
}
#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:25px;
    width:100%;
    background:#111113;
    margin-bottom: 0px;
}

footer a{
color:#444;
font-size:.8em;
text-decoration:none
}

footer a:hover{
color:#000
}

footer a:visited{
color:#aaa
}



footer#footer ul{
list-style:none;
text-align:center
}

footer#footer li{
display:inline
}

footer#footer a{
color:#140F00;
text-decoration:none;
padding:0 20px
}

footer#footer a:hover{
color:#140F00
}

footer#footer .copyright{
color:#eee;
text-align:center;
font-size:.9em;
margin-top: 3px;
}

#LecteurAudio{
    position:absolute;
 bottom: 30px;
    right: 42px;
    
    
}
#LienVideo{
     position:absolute;
 bottom: 30px;
    left: 50px; 
    
}
#facebook_button {
 background-color:#3399cc;
 background-image:url(../images/picto_facebook.png);

 background-repeat:no-repeat;
 background-position:5px 50%;

}
.centre_menu {
      width:100px;
 

width: 80%;
height: 10%;

   

position:relative;
margin-top: 10px;

margin-left: auto;
margin-right: auto;
z-index: 10000;

text-align: center;

}

.centre_menu 2{
      width:100px;
 
  border:3px solid #FFFFFF;
width: 80%;
height: 10%;
background: url(../images/decor_tibo.png);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
   border-radius:5px;     
   opacity:.8; /*mozilla firefox*/
   -moz-box-shadow: 0px 0px 10px #000;	
   -webkit-box-shadow: 0px 0px 10px #000; 
   border-radius: 10px; 
   opacity:0.8;
   

position:relative;
margin-top: 10px;

margin-left: auto;
margin-right: auto;
z-index: 10000;

text-align: center;

}
#navigation{
    position: relative;
 
 left: -20px;
    
}
#navigation li {
  
position: relative;
list-style: none;
display: inline-block;
       
}

#navigation li a {
        text-shadow: 0 2px 1px rgba(0,0,0,0.5);
        display: inline;
        text-decoration: none;
        color: #FFFFFF;
        font-size: 18px;
        font-family: 'Josefin Slab', serif;
        margin: 10px;
       
        
}



#navigation li a:hover {
        margin-top: 2px;
        color: #ECE86C;
     cursor: pointer;
}

#navigation li.active {
        font-style: italic;
        color: #FFFFFF;
}

#navigation li.active a {
    color: #FFFFFF;
}





.decor {

 overflow: hidden;


}
	

/* Resize images selon résolution */
        
#decorBackground {

}

    /* résolution mobile */    
    
@media screen and(max-width: 650px) {
	.decor {

            position: relative;
width: 400px;
height: 284px;
top:15px;
right:5%;
background: url(../images/background_tiboSmall.png), no-repeat;
left: -130px;
margin-left: 50%;

	}
 
        .logo_container{

            position: relative;
width: 300px;
height:105px;
top:-20px;
background: url(../images/logoMedium.png), no-repeat;
left: -100px;
margin-left: 50%;
margin-right: auto;         
}
      .nuage2 { 
           position: absolute;
      width:300px;
      height: 257px;
      background-image: url(../img/cdLien.png);
  top:100%;
   margin-left:10%;
margin-right: auto;
     
      z-index: 10000;
    }

	     .nuage2:hover { 
           position: absolute;
       width:200px;
      height: 171px;
      background-image: url(../img/cdLienHover.png);
top:100%;
z-index:10000;
margin-left:10%;
margin-right: auto;
    }
}


    /* résolution écran moyen */    

@media screen and (min-width: 660px) {
	.decor  {
            position: relative;
top:0px;
width: 900px;
height:638px;
background: url(../images/background800.png), no-repeat;

left: -200px;
margin-left: 50%;
margin-right: auto;
overflow: hidden;
	}
.logo_container{
position: relative;
width: 400px;
height:140px;
background: url(../images/logo400_140.png), no-repeat;
top:-550px;
left:40%;
margin-left: auto;
margin-right: auto;
z-index: 10000;

            
}
      .nuage2 { 
           position: absolute;
         width:200px;
      height: 171px;
      background-image: url(../img/cdLien.png);
  
top:100%;
z-index:10000;
margin-left:10%;
margin-right: auto;
    }
     .nuage2:hover { 
           position: absolute;
      width:200px;
      height: 171px;
      background-image: url(../img/cdLienHover.png);
  
top:100%;
z-index:10000;
margin-left:10%;
margin-right: auto;
    }
}

/* résolution grand écran */    

@media screen and (min-width: 1200px) {
.decor  {
position: absolute;
width: 1200px;
height:900px;
top:-50px;
background: url(../images/backgroundTM.png), no-repeat;
left: -600px;
margin-left: 50%;
margin-right: auto;
overflow: hidden;
	}
.logo_container{
position: absolute;                                  
width: 400px;
height:140px;
background: url(../images/logo400_140.png), no-repeat;
top:10%;
left:30%;
margin-left: auto;
margin-right: auto;
z-index: 10000;

            
}
      .nuage2 { 
           position: absolute;
    width:200px;
      height: 171px;
      background-image: url(../img/cdLien.png);
top:600px;
z-index:10000;
margin-left:10%;
margin-right: auto;
     
   
    }
     .nuage2:hover { 
           position: absolute;
      width:200px;
      height: 171px;
      background-image: url(../img/cdLienHover.png);
  
top:600px;
z-index:10000;
margin-left:10%;
margin-right: auto;
    }



@font-face {
    font-family: 'Social';
    src: url('../fonts/socialicons-webfont.eot');
    src: url('../fonts/socialicons-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/socialicons-webfont.woff') format('woff'),
         url('../fonts/socialicons-webfont.ttf') format('truetype'),
         url('../fonts/socialicons-webfont.svg#SocialIconsMedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

#content {
position: relative;
margin-top: 15px;

}

#content .menu {
	text-align:center;
	top:200px;
   
}

#content .menu .primary-menu {
	list-style-type:none;
	position:relative;
}

#content .menu .primary-menu li {
	display:inline;
	text-align:center;
	margin:0 10px;
	position:relative;
}

#content .menu .primary-menu li a {
	position:relative;
	text-decoration:none;
	font-family:'Social' !important;
	font-size:25px;
	background:#d9d9d9;
	display:inline-block;
	width:50px;
	height:35px;
	padding-top:15px;
	color:#fff;
	border:3px solid #fff;
	
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	-o-border-radius:100px;
	-ms-border-radius:100px;
	-khtml-border-radius:100px;
	border-radius:100px;
	
	-webkit-box-shadow:0 0 1px 1px #afafaf;
	-moz-box-shadow:0 0 1px 1px #afafaf;
	-o-box-shadow: 0 0 1px 1px #afafaf;
	-ms-box-shadow: 0 0 1px 1px #afafaf;
	-khtml-box-shadow:0 0 1px 1px #afafaf;
	box-shadow:0 0 1px 1px #afafaf;
	
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	-o-transition:all 1s;
	-ms-transition:all 1s;
	-khtml-transition:all 1s;
	transition:all 1s;
	
	behavior: url(../pie/PIE.htc); /* CSS3 Fix for Internet Explorer */
}

#content .menu .primary-menu li.facebook a:hover { background:#00438f;}
#content .menu .primary-menu li.twitter a:hover { background:#00b8df;}
#content .menu .primary-menu li.flickr a:hover { background:#df00bd;}
#content .menu .primary-menu li.rss a:hover { background:#ff7800;}
#content .menu .primary-menu li.mail a:hover { background:#1d1d1d;}

#content .menu .primary-menu li a:hover {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-khtml-transform: rotate(360deg);
	transform: rotate(360deg);
	
	behavior: url(pie/PIE.htc); /* CSS3 Fix for Internet Explorer */
}

#content .menu .primary-menu li span.social-span {
	font-family:Arial;
	font-size:11px;
	position:absolute;
	width:100px;
	top:45px;
	left:-45%;
	background:#000000;
	padding:5px;
	border:1px solid #B8B8B8;
	opacity:0;
	
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	-ms-border-radius:10px;
	-khtml-border-radius:10px;
	border-radius:10px;
	
	-webkit-transition:opacity 1s ease-in-out;
	-moz-transition:opacity 1s ease-in-out;
	-o-transition:opacity 1s ease-in-out;
	-ms-transition:opacity 1s ease-in-out;
	-khtml-transition:opacity: 1s ease-in-out;
	transition:opacity 1s ease-in-out;
	
	behavior: url(../pie/PIE.htc); /* CSS3 Fix for Internet Explorer */
}

#content .menu .primary-menu li a:hover ~ span.social-span {
	opacity:1;
}

#content .menu .primary-menu li span.social-span:after {
	content:"";
	position:absolute;
	border-color:#fff transparent;
	display:block;
	top:-7px;
	left:40%;
	width:0;
	border-width:0 7px 7px;
	border-style:solid;
}

.tibo {
    display: block;
          position: absolute;
      width: 491px;
      height: 650px;
      background-image: url(../images/fond_tibo1.png);
  bottom: 0px;
 left:700px;
 opacity: 0.5;
   
      z-index: 0;
}

.EnfantsTrombone {
        display: block;
          position: absolute;
      width: 200px;
      height: 167px;
      background-image: url(../images/enfantsTrombone2.png);
  bottom: 0px;
 left:0px;
 opacity: 0.3;
   
      z-index: 0;
    
}
.EnfantsTrombone2 {
        display: block;
          position: absolute;
      width: 400px;
      height: 393px;
      background-image: url(../images/enfantsTrombone02.png);
  bottom: 0px;
 left:150px;
 opacity: 0.3;
   
      z-index: 0;
    
}
.EnfantsTrombone3 {
        display: block;
          position: absolute;
      width: 400px;
      height: 269px;
      background-image: url(../images/enfantsTrombone03.png);
  bottom: 0px;
 left:350px;
 opacity: 0.3;
   
      z-index: 0;
    
}
.EnfantsMilo {
        display: block;
          position: absolute;
      width: 500px;
      height: 219px;
      background-image: url(../images/enfantsMilo.png);
  bottom: 0px;
 left:100px;
 opacity: 0.3;
   
      z-index: 0;
    
}
.mains {
        display: block;
          position: absolute;
      width: 450px;
      height: 291px;
      background-image: url(../images/mains.png);
  bottom: 0px;
 margin-right:100px;
 opacity: 0.3;
   
      z-index: 0;
    
}
.tibo2 {
    display: block;
          position: absolute;
      width: 650px;
      height: 500px;
      background-image: url(../images/fond_tibo2.png);
  bottom: 0px;
 left:700px;
 opacity: 0.5;
   

}