/* RESET */

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, tt, var,
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: inherit; vertical-align: baseline; }

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;}







body {padding: 0; margin: 0; font-family: "Trebuchet MS" sans-serif; font-weight: 300; font-size: 100%; color: #333; line-height: 140%; }

/*
#header { overflow: hidden;  width: 100%; background-image: url(media/home0.jpg); background-position: center top;   text-align: center; margin: -7% 0 0 0 ; }
#header img#pix { width: 100%;}
*/
/* #wrapper #intro {width: 450px; position: relative; left: 50%; float: left; margin: -33% 0 0 -225px;  padding: 30px 0;  background-image: url(media/bg_black.png); background-repeat: repeat;  z-index: 999; } */

#wrapper #intro {width: 40%; position: absolute; left: 30%; float: left; top: 0;  margin:  3% 0;  padding: 3% 0;  background-image: url(media/bg_black.png); background-repeat: repeat;  z-index: 999; }

#wrapper h1, #wrapper h2 {width: 100%; margin: 0; text-align: center;}

#wrapper h1 {font-size: 1.8em; font-family: 'Raleway', sans-serif; text-transform: uppercase; font-weight: 300; line-height: 115%; letter-spacing: -1px; color: white;}
#wrapper h1 em {font-weight: 800;}
#wrapper h2 {text-transform: none; font-size: 1em; margin: 2% 0 0 0; color: white;}
#wrapper a {color: #547994; margin: 20px; display: block; border: 1px solid #547994; width: 100px; float: left; position: relative; left: 50%; margin: 30px 0 0 -70px; padding: 10px 20px; text-decoration: none; background-image: url(media/bg_instathover.png); opacity: 0.7; -webkit-transition : all 0.1s linear;
	-o-transition: all 0.1s linear; 	-moz-transition: all 0.1s linear; 	transition: all 0.2s linear; }
#wrapper a:hover {; opacity: 1; color: white; border-color: white;}

hr.rip { width: 100%; clear: both; float: left; margin: 0 0 50px 0 ; background-color: transparent; border: none; color: white; border-top :1px solid #ddd;}
hr.clear { width: 100%; clear: both; float: left; margin: 00 ; visibility: hidden; background-color: transparent; color: white; border: none;	}

.page_big {margin: 0;width: 80%; float: left; left: 10%;position: relative;}
.page_small { margin: 5% 0 0 0  ;width: 75%; float: left; left: 12.5%; position: relative; }

iframe {width: 630px; position: relative; float: left; left: 50%; margin: 0 0 50px -315px; height: 346px;}


#menu {width: 100%; float: left; z-index: 10; border-bottom: 1px solid #cccccc; background-color: white;}
#menu .page_big {background-image: url(media/logo_menu.jpg); background-repeat: no-repeat; background-position: center left;}
#menu ul { width: 540px;  left: 50%;float: left; position: relative; margin: 0 0 0 -270px; }
#menu ul li {float: left;   text-transform: uppercase; font-size: 0.85em; font-family: 'Raleway', sans-serif; font-weight: 300; }
#menu1 #menu ul li#active1,
#menu2 #menu ul li#active2,
#menu3 #menu ul li#active3,
#menu4 #menu ul li#active4,
#menu5 #menu ul li#active5,
#menu6 #menu ul li#active6 { background-image: url(media/bg_menu.jpg); background-repeat: no-repeat; background-position: center bottom; }
#menu ul li a {color: #666; text-decoration: none; padding: 20px 0; display: block; width: 90px; text-align: center; -webkit-transition : all 0.1s linear;
	-o-transition: all 0.1s linear; 	-moz-transition: all 0.1s linear; 	transition: all 0.2s linear; background-image: url(media/bg_menu.jpg); background-position: center 60px; background-repeat: no-repeat; }
#menu ul li a:hover {color: #333; text-decoration: none; font-weight: 300; padding: 18px 0 22px 0; background-position: center bottom;}
#menu1 #menu ul li#active1 a,
#menu2 #menu ul li#active2 a,
#menu3 #menu ul li#active3 a,
#menu4 #menu ul li#active4 a,
#menu5 #menu ul li#active5 a,
#menu6 #menu ul li#active6 a {color: #333; font-weight: 800; background-position: center bottom;}
#menu1 #menu ul li#active1 a:hover,
#menu2 #menu ul li#active2 a:hover,
#menu3 #menu ul li#active3 a:hover,
#menu4 #menu ul li#active4 a:hover,
#menu5 #menu ul li#active5 a:hover {color: #333; font-weight: 800; background-position: center bottom; padding: 20px 0; }
#menu ul li a#blog {padding: 14px 0 17px 0; background-image: none;}
#menu ul li a#blog p {background-color: #8bd6aa; display: block; width: 70px; margin: 0 0 0 5px; height: 20px; padding: 5px 15px 6px 0; color: #17423d; background-image: url(media/flag.png); background-repeat: no-repeat; background-position: 67px -3px; -webkit-border-radius: 6px;
-moz-border-radius: 6px; border-radius: 6px; -webkit-transition : all 0.1s linear; 	-o-transition: all 0.1s linear; 	-moz-transition: all 0.1s linear; 	transition: all 0.2s linear; font-size: 1em;}

#menu ul li a#blog:hover p {background-color: #46c57b;  background-position: 67px -6px; }


a.btn {font-family: 'Raleway', Arial, sans-serif; display: block; font-size: 0.65em; padding: 7px 15px;  text-transform: uppercase; border: 1px solid #d1d1d1; color: #b3b3b3; text-decoration: none; -webkit-border-radius: 6px;  font-style: normal; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition : all 0.1s linear; 	-o-transition: all 0.1s linear; 	-moz-transition: all 0.1s linear; 	transition: all 0.2s linear; cursor : pointer; font-weight: 600;}
a.btn:hover {background-color: #f3f3f3; cursor : pointer;}



img.cover {width: 100%; float: left;}
.smenu {padding: 0; margin: 0 0 7% -235px; float: left; width: 470px; position: relative; left: 50%;   text-transform: uppercase; }
.smenu li {padding: 0; float: left; margin: 0 15px 0 0;}

#smenu1 #smenua a, #smenu2 #smenub a, #smenu3 #smenuc a, #smenu4 #smenud a, #smenu5 #smenue a {background-color: #8bd6aa; color: white; border-color: #7fbd98;}


h2, h3 {width: 90%;  text-align: center; margin: 0 0 10px 5%; font-family: 'Raleway', sans-serif; float: left;}
h2 {font-size: 1.3em; letter-spacing: -0.5px; text-transform: uppercase;   }
h2 strong {font-weight: 800; }
h2 em {font-weight: 800; color: #81dbac; font-family: Arial sans-serif; font-size: 1.2em; margin: 0 0 0 -3px;  }
h3 {font-family: Georgia, serif; font-style: italic; font-weight:normal; color: #999; line-height: 140%; font-size: 1em; width: 90%; margin: 0 5%;}
h3 strong {font-weight: bold; font-size: 0.95em;}
h3 strong a {color: #999;}
h3 strong a:hover {color: #555;}
h4 {font-size: 1.1em;}
h5 {font-size: 0.7em;}
p {font-size: 0.85em;}
p em, q {font-size: 0.85em; font-family: Georgia, serif; font-style: italic; font-weight:normal; color: #999; line-height: 120%; font-style: italic;}

.grid {float: left; width: 49.9%;  margin: 0 0 30px 0; line-height: 120%;}
.grid p {margin: 0 0 10px 0; line-height: 150%; width: 90%; }
.grid p a {color: #72c996;}
.grid q {font-family: Georgia, serif; font-style: italic; color: #999; font-weight: normal;}
.grid img {width: 90%; }
.grid h4 { font-family: 'Raleway', sans-serif; font-weight: 800; margin: 0 0 5px 0; line-height: 130%;}
.grid h5 {color: #72c996;  text-transform: uppercase; margin: -3px 0 2px 0; }
p#intro {width: 80%; margin: 30px 10% 5% 10%; float: left; text-align: center;}

.page_small h3 {}

.col {float: left; width: 100%; margin: 3% 0;}


.clear {clear: both;  margin: 0px; padding: 0px; float: left; width: 100%; background-image: url(media/square.png); background-position: center top; background-repeat: repeat-y; }

.col2 {float: left; width: 39.9%;  margin: 0; padding: 30px 5%; position: relative; }
.col2left {text-align: right; /* border-right: 6px solid #82daa7;  */font-family: 'Raleway', sans-serif; line-height: 130%; font-weight: 600;  }
.col2left h4 {font-weight: 300;  margin: 0;  line-height: 160%; color: #888;}
.col2right {padding: 30px 5% 0 5%; font-family: Georgia, serif; font-style: italic;  color: #999; font-weight: normal; line-height: 120%;  }
.col2right .accordionButton a { width: 100px; margin: 0 0 35px 0; cursor: pointer; text-align: center; }


.col2right ul.ulule {font-size: 0.8em; list-style: none; color: #444; line-height: 130%; margin: 2px 0 20px 0; }
.col2right ul.ulule li {margin: 0 0 5px 0;}

.col2right span {display: block; height:  22px; width: 22px; position: absolute; top: 30px; left: -11px; background-image: url(media/rond.png);}

.accordionButton {padding: 0; margin: 0;}
.accordionContent {width: 255%; margin: 30px 0 0 -142%; background-color: white; border-top : 1px solid #dddddd; border-bottom : 1px solid #dddddd; padding: 30px 0; text-align: center; }

.col3 li {float: left; width: 45%; margin: 0 0 0 5%; max-width: 400px;}

.acting { width: 702px; position: relative; float: left; left:50%; margin: 5% 0 3% -352px; }
.acting li {float: left; width: 350px; margin: 0 0 0 1px; }


.col3 li#rp {margin: 0;}
.acting li a {height: 180px; display: block; width: 100%; position: relative; -webkit-transition : all 0.1s linear;
	-o-transition: all 0.1s linear; 	-moz-transition: all 0.1s linear; 	transition: all 0.2s linear; text-decoration: none; cursor: pointer;}
.acting li a:hover {opacity: 0.7; cursor: pointer;}
.acting li a:hover p {bottom: -20px;}
.acting li a p {font-size: 60%; display:block; background-color: white; width: 60%; text-align: center; line-height: 120%; float: left; margin-left: 20%; position: absolute; bottom: -15px; padding: 7px 0; text-transform: uppercase; font-weight: bold; color: #333;  -webkit-transition : all 0.1s linear; -o-transition: all 0.1s linear; 	-moz-transition: all 0.1s linear; 	transition: all 0.2s linear;}
.acting li a p em {font-weight: normal;  color: #999; font-family: Arial, sans-serif; font-style: normal;}

li.homeacteur a {background-image: url(media/homeacteur_1.jpg); background-position: 0 0; }
li#homeacteur2 a {background-image: url(media/homeacteur_4.jpg); }
li#homeacteur3 a {background-image: url(media/homeacteur_3.jpg); }

.col4 li {float: left; width: 24.9%;}




.data li { margin: 0 0 2% 0; background-color: #f0f0f0; box-sizing:border-box; border-left: 1px solid #fbfbfb; border-right: 1px solid #e2e2e2;padding: 3% 0; position: relative; }
.data li.first { border-left: none; }
.data li.last { border-right: none; }

.data li p { text-align: center; font-family: 'Raleway', Arial, sans-serif; font-size: 1.2em; letter-spacing: -0.5px; line-height: 100%; display: block;  padding: 10px 0; font-weight: 600;  height: 50px; }
.data li p em {font-family: Georgia, serif; font-style: italic; font-size: 0.8em; color: #999; font-weight: normal;}
.data li a {display: block;  font-family: Georgia, serif; font-style: italic; font-size: 0.8em; color: #999; font-weight: normal; text-decoration: none; text-align: center; padding: 98px 0 0 0; background-image: url(media/picto_cal.png); background-repeat: no-repeat; background-position: center 30px; height: 42px; }
.data li a:hover {opacity: 0.8;}


.acteur { float: left;  width:100%; margin:0; border-top : 1px solid #dddddd;  padding: 30px 0 0 0; /padding-bottom:30px;  position: relative;}
.acteur img {width: 140px; float: left;}
.acteur p.act_intro {position: absolute; top: 30px; right: 0; width: 50%; display: block;  line-height: 150%; }
.acteur .miniblock {width: 50%;  float: left; }
.acteur h4 { font-family: 'Raleway', sans-serif; font-weight: 800;  }
.acteur h5 {font-family: Georgia, serif; font-style: italic;  color: #999; font-weight: normal; line-height: 120%;  }
.acteur .miniblock #accordion { float: left; width: 100%; margin: -45px 0 0 0; }

.acteur .miniblock #accordion .accordionButton a { float: left; margin: 0 0 40px 140px;}
.acteur .accordionButton a:hover { background-color: #e9e9e9;}

.acteur .accordionContent {float: left; width: 200%; color: #777; line-height: 120%; font-style: italic;  margin: 0; background-color: lime; padding: 30px 0; text-align: center; border: none; text-align: left; background-color: #f0f0f0; }


.acteur .accordionContent p {float: left; width: 40%;  margin: 0 0 0 5%; font-size: 0.75em; }
.acteur .accordionContent p.full {float: left; width: 90%;  margin: 0 0 0 5%;}
.acteur .accordionContent a {display: block; font-family: Georgia, serif; font-style: italic; padding: 4px 0 3px 25px; background-image: url(media/picto_link.png); background-repeat: no-repeat; color: #72c996; text-decoration: none;  background-position: left 6px; font-size: 1.1em;}

.plus {display: block; font-family: Georgia, serif; font-style: italic; padding: 4px 0 3px 25px; background-image: url(media/picto_link.png); background-repeat: no-repeat; color: #72c996; text-decoration: none;  background-position: left 6px; font-size: 1.1em;}

#blog_content { height: 540px; overflow: hidden; margin-left: 70px; }



.acteur .accordionContent a:hover {text-decoration: underline;}

#instagram { float: left; width: 100%; margin: 3% 0;}
#insta {float: left;  width: 33.3%; position: relative;  margin: 0; padding: 0;}

.homegalpix {float: left; width: 33.3%;  overflow: hidden; margin: 0; padding: 0;}
.homegalpix img {width: 100%; margin: 0; padding: 0;}
#liengal {margin: 0px 0 0 0; float: left;  position: relative; }
#liengal a {display: block; border: 1px solid white; background-image: url(media/bg_instathover.png); width: 200px; float: left; color: white; text-decoration: none; text-transform: uppercase; text-align: center; padding: 10px 15px; left: 50%; position: relative; margin: -28% 0 0 -125px; webkit-border-radius: 6px;  font-style: normal; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition : all 0.1s linear; 	-o-transition: all 0.1s linear; 	-moz-transition: all 0.1s linear; 	transition: all 0.2s linear; cursor :hand; font-size: 0.75em; opacity: 0.7;}
#liengal a:hover {opacity: 1;}



#rightpix2 img {width: 149.3%; opacity: 0.9;}

.wrap { margin: 2% 0 ; width: 100%; height : 350px; float: left;   }
#map-canvas { height: 100%; }

#footer {background-color: #f0f0f0; float: left; width: 100%; margin:5% 0 0 0 ;  padding: 50px 0;}

#footer .col3 {float: left; width: 30%; margin: 0 1.66%; }
#footer form.col3 {margin: 0 3.33% 0 0;}

input, select, textarea {width: 96%; margin: 0 0 10px 0; padding: 2%; border: 1px solid #cccccc; font-size: 0.7em;}
select {width: 100%;}
.submit-button { width: 100%; padding: 5%;  text-transform: uppercase; text-decoration: none; color: #222; border: 0px solid #333; margin: 0;}
.submit-button:hover {color: white; background-color: #46c57b; cursor: pointer;}

#footer
#footer ul.col3 { padding: 0; }
#footer ul.col3 li {width: 100%; margin: 0; padding: 0; font-size: 0.85em;}
#footer ul.col3 li a {padding: 0; display: inline; background-color: transparent; color: #3b2b36; text-decoration: none;}
#footer ul.col3 li a:hover {text-decoration: underline;}
#footer ul.col3 li em, #footer ul.col3 li a em{font-family: Georgia, serif; font-style: italic; color: #999; text-decoration: none; }

#footer h2 {text-align: left; width: 63%; margin: 0 0 30px 0 ; padding: 0 0 20px 0; border-bottom:  1px solid #cccccc; background-color: transparent;  float: left;}
#footer h2#sitemap {width: 30%; margin-left: 5%; }
p#egue { width: 100%; padding: 15px 0; text-align: center; color: #777; background-color: #333; float: left; text-transform: uppercase;  font-size: 0.75em;}
p#egue a {color: white ; text-decoration: none; color: #999; }
p#egue a:hover {text-decoration: underline;}


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

	.miniblock h4 { font-family: 'Raleway', sans-serif; font-weight: 800; margin: 0 0 5px 0; line-height: 130%; font-size: 0.9em;}
	.acteur p.act_intro {position: absolute; top: 30px; right: 0; width: 50%; display: block;  line-height: 130%; }
	.acteur img {width: 120px; float: left;}
	.acteur .miniblock #accordion .accordionButton a { float: left; margin: 0 0 50px 120px;}
	.acteur .miniblock #accordion { float: left; width: 100%; margin: -35px 0 0 0; }

	}

@media only screen and (max-width: 1000px) {
	body {min-width: 800px; }
	#menu .page_big {background-image: none;}
	#footer ul.col3 li em {display: none;}
	h2, h3 {width: 100%; margin-left: 0;}
	.page_small {width:100%; left:0;}
}

@media only screen and (max-width: 1150px) {
#wrapper #intro {width: 50%;  left: 25%;  margin:  3% 0;  padding: 3% 0;  }
#wrapper #intro h2 {display: none;}
}

@media only screen and (max-device-width: 1150px) {
#wrapper #intro {width: 28%;  left: 36%;  margin:  28px 0 0  0;  padding: 15px 0;  }
#wrapper #intro h2 {display: none;}
#intro h1 {font-size: 1em; margin: 0;}
#intro h1 img {width: 40px; margin: 0; }
#wrapper {height: 195px; overflow: hidden;}
}









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

#wrapper a {display: none;}
}

@media only screen and (min-width: 1900px) {
#wrapper #intro { margin:  4% 0;  padding: 5% 0;  }
/*
#header { background-image: url(media/home2.jpg);  margin: -15% 0 0 0 ; }
#header #intro { padding: 30% 0 15% 0; }
*/
}

@media only screen and (max-width : 1200px) {
background-color: yellow;
}


.blog_header {
  text-align: center;
  font-family: 'Raleway', Arial, sans-serif;
  margin-top: 0px;
  margin-bottom: 170px; }
.blog_header .blog_description {
  margin-top: 50px; }
.blog_header .blog_description h2,
.blog_header .blog_description h3 {
  width: 70%;
  text-align: center;
  margin: 0 0 8px 15%;
  font-family: 'Raleway', Arial, sans-serif;
  float: left;
}
.blog_header .blog_description h2 {
  font-size: 1.3em;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.blog_header .blog_description h2 strong {
  font-weight: 900;
}
.blog_header .blog_description h2 em {
  font-weight: 900;
  color: #81dbac;
  font-family: Arial sans-serif;
  font-size: 1.2em;
  margin-left: 3px;
}
.blog_header .blog_description h3 {
  font-family: Georgia serif;
  font-style: italic;
  font-size: 1.1em;
  color: #999;
  line-height: 140%;
}
.blog_header .blog_description h3 strong {
  font-weight: bold;
  font-size: 0.95em;
}
.blog_header .blog_tags {
  text-transform: uppercase;
  font-size: 14px;
  margin: 50px 0 70px 0;
}
.blog_header .blog_tags span {
  float: none;
  font-weight: 300;
  color: #999999;
}
.blog_header .blog_tags span:hover {
  cursor: pointer;
  font-weight: 600;
}
.blog_header .blog_tags .active {
  font-weight: 800;
  color: #7bcb9c;
}
.blog_header .blog_tags span:first-child,
.blog_header .blog_tags span:nth-child(4) {
  border-right: 1px solid #999999;
}
.blog_content {
  text-align: center;
  width: 90%;
  margin-left: 5%;
}
.blog_content article {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0;
  width: 280px;
  height: 540px;
  background-color: #f0f0f0;
  text-align: center;
  margin: 0 26px 70px 0;
}

.blog_content article .article_description_img_false {
  height: 262px;
  width: 280px;
}

.blog_content article .article_description_img_true {
  height: 152px;
  width: 280px;
}

.blog_content article .article_description_img_false img {
  max-width: 100%;
  height: 262px;
} 
.blog_content article .article_description_img_true img {
  max-width: 100%;
  height: 152px;
}
.blog_content article .article_overview {
  border-top: 8px solid white;
}
.blog_content article .article_overview .overview_date {
  display: block;
  font-family: Georgia;
  font-style: italic;
  color: #999999;
  font-size: 12px;
  margin: 0;
}
.blog_content article .article_overview .overview_title {
  display: block;
  width: 90%;
  margin: 5px 0 0 5%;
  font-family: 'Raleway', Arial, sans-serif;
  font-weight: 600;
  color: #333333;
  font-size: 16px;
  margin-bottom: 10px;
}
.blog_content article .article_overview .overview_short_description {
  display: block;
  width: 80%;
  margin: 10%;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  color: #333333;
  font-size: 13px;
}
.blog_content article .a_button {
  position: absolute;
  bottom: 30px;
  left: 32%;
  background-color: #f0f0f0);
  border: 1px solid #d1d1d1;
  padding: 7px 15px ;
  font-family: 'Raleway', Arial, sans-serif; 
  font-weight: 600;
  color: #999999;
  font-size: 10px;
  -moz-border-radius: 6px; border-radius: 6px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition : all 0.1s linear;
  -o-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  transition: all 0.2s linear;
}
.blog_content article .a_button:hover {
  text-decoration: none;
  color: #666;
  border-color: #888;
  background-color: #e4e4e4;
}
.tags {
  list-style: none;
  margin: 30px 0 15px 0;
  padding: 0;
  cursor: pointer;
}
.tags li {
  display: inline-block;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 10px;
  padding: 2px 15px 2px 15px;
  border-radius: 3px;
  color: #333333;
  text-transform: uppercase;
  background-color: #8bd6aa;
  margin-right: 10px;
}
.tags li:last-child {
  margin-right: 0;
}