body {  background:none repeat scroll 0 0 #FFF; font-size:100%; margin:0;
        font-family:'Open Sans',Arial,sans-serif; color:#444; min-width: 360px; }


h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans'; color:#444; font-weight: normal; margin:0.2em 0 0.2em 0; }
h1 {font-size:2.4em;}
h2 {font-size:2em;}  
h3 {font-size:1.6em;}  
h4 {font-size:1.2em;}  
h5 {font-size:1em;}  
h6 {font-size:0.9em;}    
a, a:link, a:visited, a:hover, a:active { text-decoration:none; color:#444; }
img { order:0; height:auto; width:100%; }
p{ font-size:14px;margin:0 20px;   }


.droite{float: right;}

.center { float:none; margin:0 auto; display:block; }
.centre{width:100%; margin:0 auto; padding:0; text-align: center;}
.clear{clear:both;}
.blanc{color:#fff;}

.bord-ex{border:1px dashed red;}
.padd-top{padding-top:40px;}
.padd-t-b{padding-top:30px;padding-bottom:30px;}
.padd-gene {padding:20px;}
.padd-gene2 {padding:5%;padding-top:0;}
.padd-bot{padding-bottom:86px;}
.sup-pad-h-b{padding-top:20px; padding-bottom:0;}
.sup-pad-h{padding-top:0;}
strong { font-weight: 600;}
article img{  width: 350px; height: auto; margin:0 15px; margin-top:15px; display:inline;}

#signature .box, .s4{ margin-top:0; padding-top:0; padding-bottom:0;  }
#signature h3{  margin-top:5px; letter-spacing: 1px; font-weight:300;color:#666;  }
#signature h4{  position:absolute; left:14px; right:0; top:30px; letter-spacing: 18px;
                font-size:10px; font-weight:400;color:#666; text-align: center;}
#nav-sup a{     font-size: 10px; letter-spacing:1px; font-weight:700;}
#nav-sup h3{     font-size: 35px; letter-spacing:1px; font-weight:400; padding-top:15px; color:rgba(72,81,78,0.7);}
#nav-sup h3:hover{color:rgba(72,81,78,0.9);}
#nav-base nav a{ color:#fff; font-size:15px; padding:20px; letter-spacing:1px; font-weight:300 }

.select-nav{ display:block; width:200px; height:0px; position: relative; }
#triangle1-down, #triangle-down, #triangle2-down, #triangle3-down { position:absolute; top:24px; width:0; height:0; border-left: 15px solid transparent;
                border-right: 15px solid transparent; border-top:15px solid rgb(134,151,145);}
/*
#triangle1-down{ left:210px; }
#triangle-down{ left:535px; }
#triangle2-down{ left:370px; }
#triangle3-down{ left:690px; }
 */                       
#tx-middel .box{padding-top:0; padding-bottom: 0;  }
#tx-middel p{ font-size:13px; text-align:justify;  }
#tx-middel hr{display: none;}

.tx-color-pointer{color:yellow;}

.color-2 {border: 1px solid rgb(134,151,145);background: rgb(134,151,145); width:70px; height:28px; margin-right: 10px;}
.color-2 a{color:#fff; font-size: 11px; letter-spacing:1px; }
.color-2 a:hover{color:rgb(83,100,94);}


.box-2 {display:block; padding:10px; width:100%;  border:0px solid #888; }
.box-3 {display:block; padding:0px; width:100%; height: 80px; border:0px solid #888; }
.box-3 hr {display:block; width: 150px; margin: 15px auto; }
.box-4 {display:block; padding:10px; width:100%; height: 750px; border:0px solid #888; }
.box-5 {display:block; padding:10px; width:100%; height: 838px; border:0px solid #888; }
.box-6 {display:block; padding:10px; width:100%; height: 750px; border:0px solid #888; }
.box-7 {display:inline-block; padding:0px; width:100%;  border:0px solid #888; }
 
                
#home-gallery{ width:960px;  margin:0 auto; position:relative;}
#home-gallery2{ width:960px;margin:0 auto; position:relative;} 
#home-gallery img{ width:145px; height:auto;  }
#home-gallery2 img{ width:145px; height:auto; }

#component ul img{ height: 550px; width: auto; display: block; margin:0 auto;}  /* $$$  */

#home-gallery p{ font-size:14px; text-align:justify; }

		    /* Texte sur vignette ( gallerie ) - debut  */
                                                                                 
.habillage-image{ display:block; border: 2px solid rgb(100,108,105); padding:10px; margin:10px 20px;
	-webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.5); box-shadow: 0 0 3px 1px rgba(0,0,0,0.5);
	list-style-type: none; text-align: center;  }

a:hover span.text-content{ opacity: 1;  }

span.text-content span { display: table-cell; text-align: center; vertical-align:middle; padding-left: 0px; }

span.text-content {
  background: rgba(134,151,145,0.9);
  color: rgb(255,255,255);
  cursor: pointer;
  display: table;
  height: 30px;
  font-family: inherit;
  font-weight: 300;
  line-height: 12px;
  letter-spacing: 1px;
  font-size: 11px;
  position: absolute;
  left: 20px;
  top: 85px;
  width: 145px;
  opacity: 0;
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  -o-transition: opacity 300ms;
  transition: opacity 300ms;  }




		    /* Texte sur vignette - fin  */  

#deco{ width:940px;  margin:0 auto; }
#deco img{  display:block; width:70%; height:auto; margin:0 auto;}

#deco-expo {  margin:0 auto; display:block; }
#deco-expo .cadre{  display:block; width:90%; height:auto; margin:0 auto; border: 2px solid rgb(134,151,145); }

#deco-expo p{ text-align: center; }
#deco-expo img{  display:block; width:100%; height:auto; margin:0 auto;}
#deco-expo img:hover{  opacity: 0.6;}


#elephant{ width:100%; height:40px; margin:0 auto;}
#elephant img{ display:block; width:50%; height:auto; margin:0 auto; opacity:0.5; }




/* ---FX HOVER TX--- */
.color-1 {background: rgb(134,151,145);}

*:after,*::before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

nav,section{display:block;}


/* Effect 1: Brackets */
.cl-effect-1 a::before, .cl-effect-1 a::after {
	display: inline-block; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; }

.cl-effect-1 a::before {
	margin-right: 10px; content: '['; -webkit-transform: translateX(20px);
	-moz-transform: translateX(20px); transform: translateX(20px); }

.cl-effect-1 a::after {
	margin-left: 10px; content: ']'; -webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px); transform: translateX(-20px); }

.cl-effect-1 a:hover::before,.cl-effect-1 a:hover::after,.cl-effect-1 a:focus::before,.cl-effect-1 a:focus::after {
	opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); }
/* ---FIN FX HOVER TX--- */

#pict-contenaire{ display:block;width:100%;}
#pict-contenaire img{ display:block;width:60%; }	
#tx-contenaire{ display:inline-block;height:auto; width:100%; }
#tx-contenaire img{ display:block;width:100%; opacity: 0.8;margin-top:-50px;   }

.spare{width: 100%; height:150px; display: block;}

@media screen and (max-width: 1000px){
  #home-gallery2{ width:auto;  }
  #deco{ width:100%;}
}

@media screen and (max-width: 960px){
  #home-gallery{ width:100%; }
}

@media screen and (max-width: 800px){
       	
        #nav-sup .s-6{ margin-top:5px;}
        #nav-sup h3{ padding-top:0px;}
        #nav-base nav a{ padding:10px; font-size:15px;}
        #triangle-down{ top:2px; left:420px;}       #triangle1-down{top:2px; left:135px; }
        #triangle2-down{ top:2px;left:275px; }      #triangle3-down{top:2px; left:560px; }     
       /* #home-gallery{ width:auto; height: 1450px;} */
        a span.text-content{ opacity: 1;  }
        span.text-content { top: 95px; background: rgb(100,108,105); border: 2px solid rgb(60,67,64); margin:5px 25px;}
        .habillage-image{ box-shadow:none; margin-top:0; margin-bottom:30px; margin-right:45px; margin-left:45px;}
        #tx-middel hr{display: block; width: 100%; opacity: 0}
        #tx-middel .s-12{ height: 180px; background: rgb(195,203,200); border-top:5px solid #fff;}
        .box-2 { height: 135px; }
	.box-3 { height: auto; }
	.box-4{height: 700px;}
        .box-5 {height: 800px;}
	.box-5 img{width: 90%;}
	.box-6{height: 650px;}
        #deco{ width:auto;}
	/*#tx-middel .s-12{ height: 185px;}*/
       }
	

@media screen and (max-width: 700px){
    #home-gallery2{ width:auto; }
   
    .habillage-image{ margin:0px auto;margin-top:0; margin-bottom:30px;}
    span.text-content{ margin:0px auto;  top:100px; left:0;right:0;}
    .box-6{height: 600px;}
    #deco{ bottom:0px;}
    #elephant img{ width:70% }
    #nav-base nav a{ padding:0px; font-size:12px;}
    #triangle-down{left:335px;} #triangle2-down{left:230px;} #triangle3-down{left:440px;} #triangle1-down{left:125px;}
    #tx-contenaire img{ margin-top:-30px;    }
    }
                                   

@media screen and (max-width: 500px){
        #signature h4{ left:7px;}
        #nav-sup h3{ font-size: 20px; font-weight: 500;}
        .habillage-image{ padding:5px; margin:0px auto;margin-top:0; margin-bottom:30px;  }
        span.text-content{ width:145px; top:90px; }
        /*#triangle-down {left:255px;}
	#triangle2-down{left:155px;}
	#triangle3-down{left:360px;}
	#triangle1-down{left:50px;}
       */
	#home-gallery2{ width:auto;  }
        #home-gallery img{  height:auto; }
       
        #elephant img{ width:80% }
       /* #tx-middel .s-12{ height: 185px;}*/
       .box-2 { height: 115px; }
        #deco{ bottom:-60px;}
        #deco img{ width:90%; }
        .color-2 { margin-top: 25px;}
	 #block-elephant{ width:auto; height:0px; }
	 article img{  width:85%; margin:0 15px; }
	 #component ul img{ height: 320px; }  /* $$$  */
	} 
	 
@media screen and (max-width: 420px){	 
	.cl-effect-1 a::before {margin-right: 2px; }
	 #component ul img{ height: 270px; }  /* $$$  */
      .cl-effect-1 a::after {margin-left: 2px; }
      #tx-middel .s-12{ height: 205px;}
       .box-2 { height: 135px; }
        }