/* ---- RESET CSS --*/

html, body {height:100%;}
html {font-size:100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

body {margin:0px; padding:0px; font-family:Lato, Helvetica, Arial, sans-serif; color:#000; line-height: 1.231; font-size:13px;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display: block;} 

*{outline:none;}

p {text-align:left; margin:0 0 10px 0; line-height:18px;}
p:last-child {margin:0;}

blockquote {margin:25px 20px 10px 0; padding:0 20px; border-left:3px solid #C66108; color:#red; line-height:1.5; font-style:italic; font-family:Georgia;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
img {border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle;}
nav ul {list-style: none; list-style-image: none; margin: 0; padding: 0;}

fieldset, figure, form {border: 0; margin: 0; padding: 0;}
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; } 
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
label,input,select,textarea{font-family:Helvetica, Arial, sans-serif; font-size:12px; font-weight:normal; line-height:normal;}
textarea { overflow: auto; vertical-align: top; resize: vertical;} 
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; } 

/* ---- LIENS ---- */

a {color:#ffffff; text-decoration:none;}  /*-- #dc09c1 --*/
a:hover {color:#ff0000; text-decoration:none;}   /*-- #8009dc --*/
a img {border:none;}

/* ---- Hn ---- */ 

h1,h2,h3,h4,h5,h6{font-family:'Lato', Arial, sans-serif; font-weight:400; color:#000;}
h1{font-size:30px; text-shadow: 5px 5px 5px #c66108;}
h2{font-size:24px; text-shadow: 5px 5px 5px #c66108;}
h3{font-size:18px;}
h4{font-size:16px;}
h5{font-size:14px;}
h6{font-size:13px;}

/* ---- SELECTION TEXTE ---- */

::-moz-selection {
background-color:#fff200;    
color:#000;
}

::selection {
background-color:#fff200;
color:#000;
}


/* ---- PROPRIETES UTILES ---- */ 
.red {color:#FF0000;}     /*--- SALVAT --*/
.yellow {color:#FFFF00;}     /*--- SALVAT --*/
.green{color:#008000;}     /*--- SALVAT --*/
.blue {color:#0000FF;}     /*--- SALVAT --*/
.salva {color:#C66108;}     /*--- SALVAT --*/
.clear {clear:both;}
.alignleft {float:left; margin-right:10px; padding:5px;}
.aligncenter {margin:0 auto;}
.alignright {float:right; margin-left:20px; padding:20px;} 
.alignrightcontact {float:right; margin-left:5px; padding:5px;}  
.relative {position:relative;}
.container {width:940px; margin:0 auto; position:relative;}
.hidden {overflow:hidden;}
.block {display:block;}
.inline {display:inline;}
.ib {display:inline-block;}
.indent {text-indent:-7000px;}
.nomargin {margin:0px;}
.col {-webkit-column-count:3;
  -webkit-column-gap:50px;
  -webkit-column-rule:1px dotted #333;
  
  -moz-column-count:3;
  -moz-column-gap:50px;
  -moz-column-rule:1px dotted #333;
  
  -o-column-count:3;
  -o-column-gap:50px;
  -o-column-rule:1px dotted #333;
  
  column-count:3;
  column-gap:50px;}

#points {position:fixed; top:0; left:0; height:100%; width:100%; background:url(img/point_black.png) top left repeat; z-index:-100;}  

/*-- SPRITE33 GOOGLE+ / GOOGLE MAPS / HOME  --*/

#reseaux {display:inline-block; position:fixed; top:30%; right:5px;}
.reseau {display:block; width:32px; height:32px; padding:0px; text-indent:-7000px; transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s;}
#tv {background:url(img/sprite77.png) no-repeat 0px 0px; }
#tv:hover {background:url(img/sprite77.png) no-repeat 0px -32px;}
#gp {background:url(img/sprite77.png) no-repeat -32px 0px;}
#gp:hover {background:url(img/sprite77.png) no-repeat -32px -32px;}
#ac {background:url(img/sprite77.png) no-repeat -64px 0px;}
#ac:hover {background:url(img/sprite77.png) no-repeat -64px -32px;} 
#bo {background:url(img/sprite77.png) no-repeat -96px 0px;}
#bo:hover {background:url(img/sprite77.png) no-repeat -96px -32px;}     

/*-- SPRITE_SHOPPIWI PIWIGO / PRESTASHOP  --*/

#toile {display:inline-block; position:absolute; bottom:70px; left:10px; border:1px solid #5d5d5d;  border-radius:5px ;padding:5px;}  
.araigne {display:inline-block; width:180px; height:90px; padding:0px; text-indent:-7000px; transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s;}
#tw {background:url(img/pwigo.png) no-repeat -0px 0px;}
#tw:hover {background:url(img/pwigo.png) no-repeat -0px -90px;}

/*-- SPRITE_LOGO HOME PAGE  --*/

#accueilpage {display:inline-block; position:absolute; top:20px; left:10px; border-radius:5px ;padding:5px;}  
.change {display:inline-block; width:180px; height:39px; padding:0px; text-indent:-7000px; transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s;}
#lg {background:url(img/sprite_contact.png) no-repeat 0px 0px;}
#lg:hover {background:url(img/sprite_contact.png) no-repeat 0px -39px;} 

/*-- SPRITE22 TUTO.COM --*/

#tuto {display:inline-block; position:absolute; top:350px; left:265px; border-radius:5px ; padding:5px;} 
.gazaix {display:inline-block; width:100px; height:28px; padding:0px; text-indent:-7000px; transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s;}
#tt {background:url(img/sprite22.png)  no-repeat 0px 0px;}
#tt:hover {background:url(img/sprite22.png) no-repeat 0px -28px;}

/*-- SPRITE _Ex2com  --*/

#ex2com {display:inline-block; position:absolute; top:450px; left:405px; border-radius:5px ; padding:5px;} 
.hosting {display:inline-block; width:162px; height:56px; padding:0px; text-indent:-7000px; transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s;}
#ex2 {background:url(img/sprite55.png)  no-repeat 0px 0px;}
#ex2:hover {background:url(img/sprite55.png) no-repeat 0px -56px;}

#ws_bullets{position:fixed; widh:250px; height:50px;}

/* ---- MENU GAUCHE ---- */

#sidebar{position:fixed; z-index:999; top:0; width:217px; height:100%; background-color:rgba(192,192,192,0.8); top left repeat-y;}

#copyright {position:absolute; bottom:5px; left:10px; font-size:12px; cursor:default;}
#copyright p {line-height:1.2; text-align:left;} 

/*-- #shopwi {position:absolute; bottom:173px; left:20px; font-size:12px; cursor:default;} --*/
#pwisho {position:absolute; bottom:173px; left:20px; font-size:12px; cursor:default;}

#visite {position: absolute; text-align:center; background:rgba(0,0,0,0.2); padding:2px; border:1px solid #5d5d5d;   border-radius:5px; width:188px; bottom:40px; left:10px; font-size:12px; color:#rrr;}

/* ---- CONTENT --*/

#hide {position:absolute; top:0px; right:-50px; display:block; width:120px; height:25px; background:url(img/hide.png) top left no-repeat; text-indent:-7000px;}
.show {background:url(img/show.png) top left no-repeat!important;} 

.content {position:relative; margin:0px 140px 180px 320px; min-height:100%; min-width:840px;}
.content h1 {margin:0 0 20px 0; padding:0px; display:block;}

#home {padding-top:40px;}
#about, #about2, #about3, #about4, #about5, #about6, #about7, #about8, #about9 {padding-top:40px;} 

#title_news {background:url(img/news01.png) top left no-repeat; width:600px; height:180px; text-indent:-7000px;} 
#title_toutes {background:url(img/ttraces.png) top left no-repeat; width:356px; height:48px; text-indent:-7000px;}
#title_portraits {background:url(img/portraits.png) top left no-repeat; width:312px; height:48px; text-indent:-7000px;}
#title_paysages {background:url(img/paysages.png) top left no-repeat; width:312px; height:48px; text-indent:-7000px;}
#title_annima {background:url(img/annimaux.png) top left no-repeat; width:312px; height:48px; text-indent:-7000px;}
#title_nature {background:url(img/nature.png) top left no-repeat; width:425px; height:48px; text-indent:-7000px;}
#title_divers {background:url(img/divers.png) top left no-repeat; width:251px; height:48px; text-indent:-7000px;}
#title_contact {background:url(img/formulaire.png) top left no-repeat; width:312px; height:48px; text-indent:-7000px;}
#title_nous {background:url(img/pland.png) top left no-repeat; width:269px; height:48px; text-indent:-7000px;}
#title_mentions {background:url(img/ttraces.png) top left no-repeat; width:356px; height:48px; text-indent:-7000px;}

#content_news {overflow:hidden; min-height:340px;}
#content_toutes {padding:20px; background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */ color:#rrr;  border-left:2px solid #C66108; border-top:2px solid #C66108;-webkit-transition:0.3s; height:auto; width:95%;}
#content_toutes:hover {background-color:#d5d5d5;}
#content_portraits {padding:20px; background: linear-gradient(to right, rgba(188,37,55,1) 0%,rgba(125,185,232,0) 100%); /* W3C */ color:#rrr; border-left:2px solid #C66108; border-top:2px solid #C66108;-webkit-transition:0.3s; height:auto; width:95%;} 
#content_portraits:hover {background-color:#d5d5d5;}
#content_paysages {padding:20px; background: linear-gradient(to right, rgba(172,47,239,1) 0%,rgba(125,185,232,0) 100%); /* W3C */ color:#rrr; border-left:2px solid #C66108; border-top:2px solid #C66108;-webkit-transition:0.3s; height:auto; width:95%;}
#content_paysages:hover {background-color:#d5d5d5;}
#content_annima {padding:20px; background: linear-gradient(to right, rgba(47,120,237,1) 0%,rgba(125,185,232,0) 100%); /* W3C */  border-left:2px solid #C66108; color:#rrr; border-top:2px solid #C66108;-webkit-transition:0.3s; height:auto; width:95%;}
#content_annima:hover {background-color:#d5d5d5;}
#content_nature {padding:20px; background: linear-gradient(to right, rgba(137,234,46,1) 0%,rgba(125,185,232,0) 100%); /* W3C */  border-left:2px solid #C66108; color:#rrr; border-top:2px solid #C66108; -webkit-transition:0.3s; height:auto; width:95%;}
#content_nature:hover {background-color:#d5d5d5;}
#content_divers {padding:20px; background: linear-gradient(to right, rgba(237,186,47,1) 0%,rgba(125,185,232,0) 100%); /* W3C */ border-left:2px solid #C66108; color:#rrr; border-top:2px solid #C66108; -webkit-transition:0.3s; height:; width:95%;}
#content_divers:hover {background-color:#d5d5d5;}
/*-- #content_contact {padding:20px; background-color:rgba(192,192,192,0.6); color:#rrr; border-top:2px solid #C66108; -webkit-transition:0.3s; height:; width:95%;}
#content_contact:hover {background-color:#d5d5d5;} --*/
#content_mentions {padding:20px; background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */ color:#rrr;  border-left:2px solid #C66108; border-top:2px solid #C66108;-webkit-transition:0.3s; height:auto; width:95%;}
#content_mentions:hover {background-color:#d5d5d5;}

/* ---- CAROUSEL NEWS ---- */

.single_news {position:relative; width:200px; min-height:365px; background-color:#fff; display:inline-block; margin:0 40px 40px 0; border-top:2px solid #C66108; transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s; vertical-align:top;}
.single_news:nth-child(3n+3) {margin:0 40px 40px 0;}
.single_news > img {width:100%;}
.single_news:hover, .news_active {background-color:#000!important; cursor:default;}
.single_news:hover h2, .news_active h2 {color:#fff!important;}
.single_news:hover .more, .news_active .more {background:url(img/more.png) no-repeat -31px 0px!important;}

/*-- fin carousel news ---*/
	
.contenu_news {padding:20px;}
.contenu_news p, .contenu_news h2 {margin:0px; padding:0px;}
.contenu_news h2 {line-height:1;}
.date {color:#fd9705; text-transform:uppercase; font-size:14px; font-weight:bold; padding-bottom:10px!important;}
.text {color:#5e5e5e; padding-top:10px!important;}

.more {display:block; position:absolute; bottom:0; right:0; width:31px; height:31px; background:url(img/more.png) top left no-repeat; text-indent:-7000px;}
.close_news {background-color:#c66108; color:#fff; text-transform:uppercase; display:block; margin-top:10px; padding:1px; text-align:center; font-size:14px; font-weight:bold;}

.btn_slider {display:inline-block; padding:2px 7px 7px 7px; font-size:11px; color:#fff; position:absolute; top:190px; cursor:pointer; background-color:#000; transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s;}
.btn_slider:hover {background-color:#c66108; color:#000;}

#next {right:40px;}
#prev {right:70px;}


/* ---- FORMULAIRE ---- */

#form {float:left; position:relative; width:100%!important; padding:20px; background-color:rgba(192,192,192,0.6); color:#000; border-top:1px solid #C66108;}
#form:hover {background-color:#d5d5d5;}
#form > p {margin-bottom:15px!important;}
#form input[type="text"], #form input[type="email"], textarea {width:80%; padding:5px; border:none; transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s;}
#form input[type="text"]:focus, #form input[type="email"]:focus, textarea:focus {background-color:#e4e4e4;}
#form textarea {height:100px;}
#submit {position:absolute; width:100%; bottom:-26px; left:0; border:none; background-color:#C66108; color:#fff; text-transform:uppercase; display:block; padding:5px; text-align:center; font-size:14px; font-weight:bold;}
#submit:hover {color:#000;}


#trouver{float:right; width:100%; padding:5px; background-color:#fff;}
#trouver iframe {width:100%; vertical-align:top;} 

#googlemap {float:right; width:60%; padding:5px; background-color:#fff;}
#googlemap iframe {width:100%; vertical-align:top;}

#success {background:#fff200; color:#000; font-weight:bold; padding:10px; text-transform:uppercase; text-align:center;}
.error {background-color:#d91b5c!important;}
.error::-webkit-input-placeholder {color:#fff!important;} 
#loading {position:absolute; bottom:40px; right:40px; display:none;}

/* -- GOOGLE TRANSLATE  SALVAT--*/

#google_translate_element {position:absolute; z-index:100; line-height:5px; right:10px; top:0px; padding:5px; }

/*-- FOOTER SALVAT--*/

footer {position:fixed; bottom:0px; left:0px; background:rgba(0,0,0,0.8); width:100%; height:25px;  padding:5px; font-size:12px; color:#fff;}
#copyrig {position:relative; top:5px; text-align:center; color:#fff;}
#copyrig li a:hover {background-color:#c66108; color:#fff;}

#cacher, .btnvert {position:fixed; right:5px; color:#C66108; margin-left:0 10px; padding: 5px; -webkit-border-radius:3px;}
#cacher:hover, .btnvert {background-color:#C66108; color:#111;}

/*-- DIAPORAMA  PORTRAITS--*/  
#diaporama11 {}
img{border:none;}
ul.galerie li{display:inline-block; margin:10px; padding:10px; border:1px solid #C66108; list-style:none;}
ul.galerie li a img{ display:inline-block; width:100px;}
ul.galerie li a:hover img{
    
  -moz-transform: scale(3.5);
  -webkit-transform: scale(3.5);
  -o-transform: scale(3.5); 
  
  -moz-transform-origin: bottom low;
  -webkit-transform-origin: bottom low;
  -o-transform-origin: bottom: low;
  
  -moz-box-shadow: 4px 4px 10px #777;
  -webkit-box-shadow: 4px 4px 10px #777;
  -o-box-shadow: 4px 4px 10px #777; }

  /*-- DIAPORAMA  PAYSAGE--*/    
#diaporama22{} 
img{border:none;}    
ul.team li{display:inline-block; margin:5 10px; padding:10px; border:1px solid #C66108; list-style:none;}
ul.team li a img{ float:right; width:100px;}
ul.team li a:hover img{
    
  -moz-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2); 
  
  -moz-transform-origin: bottom low;
  -webkit-transform-origin: bottom low;
  -o-transform-origin: bottom: low;
  
  -moz-box-shadow: 4px 4px 10px #777;
  -webkit-box-shadow: 4px 4px 10px #777;
  -o-box-shadow: 4px 4px 10px #777; }

   /*-- DIAPORAMA  ANNIMAUX--*/   
  #diaporama33{}   
img{border:none;}    
ul.parc li{ display:inline-block; margin:5 10px; padding:10px; border:1px solid #C66108; list-style:none;}
ul.parc li a img{ float:right; width:100px;}
ul.parc li a:hover img{
    
  -moz-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2); 
  
  -moz-transform-origin: bottom low;
  -webkit-transform-origin: bottom low;
  -o-transform-origin: bottom: low;
  
  -moz-box-shadow: 4px 4px 10px #777;
  -webkit-box-shadow: 4px 4px 10px #777;
  -o-box-shadow: 4px 4px 10px #777; }
  
   /*-- DIAPORAMA  NATURE MORTE--*/   
#diaporama44{}    
img{border:none;}    
ul.vallee li{display:inline-block; margin:5 10px; padding:10px; border:1px solid #C66108; list-style:none;}
ul.vallee li a img{ float:right; width:100px;}
ul.vallee li a:hover img{
    
  -moz-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2); 
  
  -moz-transform-origin: bottom low;
  -webkit-transform-origin: bottom low;
  -o-transform-origin: bottom: low;
  
  -moz-box-shadow: 4px 4px 10px #777;
  -webkit-box-shadow: 4px 4px 10px #777;
  -o-box-shadow: 4px 4px 10px #777; }
  
    
#diaporama55{}  
img{border:none;}    
ul.vallee li{ display:inline-block; margin:5 10px; padding:10px; border:1px solid #C66108; list-style:none;}
ul.vallee li a img{ float:right; width:100px;}
ul.vallee li a:hover img{
    
  -moz-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2); 
  
  -moz-transform-origin: bottom low;
  -webkit-transform-origin: bottom low;
  -o-transform-origin: bottom: low;
  
  -moz-box-shadow: 4px 4px 10px #777;
  -webkit-box-shadow: 4px 4px 10px #777;
  -o-box-shadow: 4px 4px 10px #777; }

  /*-- SALVAT --*/

   /*-   CSS LIGHTBOX  
    
    .lightbox {display:inline-block; padding:10px;}
    .lightbox img {padding:3px; border:1px solid #ccc;}
    .lightbox img:hover {border:4px solid #c66108; padding:10px;}
    
    #fond-noir {position:fixed; z-index:77777; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.8);}
    
    #contenu {position:relative; width:840px; margin:5% auto;}
    
    #contenu img {background-color:#fff; max-width:600px; padding:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0 0 50px #000; -webkit-box-shadow:0 0 50px #000; -moz-box-shadow:0 0 50px #000;}
    
    #close {position:relative; top:25px; right:25px; width:50px; height:50px; background:url(img/close.png) top left no-repeat; cursor:pointer;}
    #close:hover {background:url(img/close_hover.png) top left no-repeat;}
    
    #title {position:absolute; bottom:15px; left:15px; display:inline-block; background:#000; color:#fff; padding:3px 30px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0 0 20px #000; -webkit-box-shadow:0 0 20px #000; -moz-box-shadow:0 0 20px #000;}
 
   CSS LIGHTBOX   --*/

/*-- MENU SIDEBARDEROULANT PHOTO DEROULANT  --*/

 #galerie-menu 
{
	width:200px;
	margin:6.5em auto;  /*-- HAUTEUR DU MENU --*/
	border:nome;    /*-- solid ---*/
	border-radius:5px;
	box-shadow:1px 1px 1px Navy;
	text-align:right;
	
}
#galerie-menu a, #galerie-menu:hover a:focus 
{
	display:block;
	height:31px;
	position:relative;
	overflow:hidden;
    box-shadow:0 0 2px white; 
	transition:2s;
	transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
#galerie-menu a:hover , #galerie-menu a:focus 
{
	transition:2s;
	transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
	height:220px;
}
#galerie-menu a:before 
{
	content:attr(title);
	text-align:center;
	width:200px;
	position:absolute;
	top:0;
	left:0;
	font-size:20px;
	color:white;
	border:1px solid Gray;
    box-shadow:0 0 2px white; 
	background:rgba(0,0,0,0.3);
	line-height:28px;
}