/* color
vert: rgb(199, 210, 20);
gris: rgb(76,76,76)
*/
/* amatic-sc-regular - latin 
https://google-webfonts-helper.herokuapp.com/fonts/alegreya-sans-sc?subsets=latin */
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/amatic-sc-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'),
       url('../fonts/amatic-sc-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/amatic-sc-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/amatic-sc-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/amatic-sc-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/amatic-sc-v13-latin-regular.svg#AmaticSC') format('svg'); /* Legacy iOS */
}

body {
	font-family: "Helvetica Neue - Medium", Arial, Helvetica, sans-serif ;
	color: rgb(76,76,76);
	background-color:#fff;
	margin:0; padding:0;
	font-size: 20px;
}

a { color: rgb(23, 119, 171); }

p, ul, li {margin-bottom: 20px}

hr.clear {clear: both; visibility:hidden ; border:0; height:0;}
h1, h2, h3 { font-family: "Amatic SC", cursive; 	}
h1 {font-size:30px;}
h1 span.baseline {font-size:24px;}
h2 { color: rgb(199, 210, 20); margin:20px 0;}

div#header { margin: 0 ; padding: 0 ; 	position: relative;	background: #FFF ; 	}
img#logo {height:150px ; width:auto; margin:0 20px}
div#menu {float:right; margin: 100px 80px 10px 0; font-family: "Amatic SC", cursive; font-size:38px;}

div#content, div#content2, div#content3, div#content4, div#content5, 
div#content6, div#content7,  div#content8 { 
	margin: 0 auto 30px auto; padding: 20px 20px ;  min-height:500px;
	position: relative;
	background-color: rgb(199, 210, 20);
	background-size: cover;
	background-position: top left;
	}
div#content {	background-image: url(../img/plouharnel-1.jpeg) ; }
div#content2 {	background-image: url(../img/plouharnel-2.jpeg) ; }
div#content3 {	background-image: url(../img/plouharnel-3.jpeg) ; }
div#content4 {	background-image: url(../img/plouharnel-4.jpeg) ; 
	background-size:contain ; background-repeat:no-repeat;}
div#content5 {	background-image: url(../img/plouharnel-5.jpeg) ; }
div#content6 {	background-image: url(../img/plouharnel-6.jpeg) ; }
div#content7 {	background-image: url(../img/plouharnel-7.jpeg) ; }

div#vision , div#methode , div#rejoindre , div#objectifs , div#quisommesnous{ 
	margin: 0 50px 0 auto; padding: 20px ;  min-height:500px; 
	width: 500px;
	background-color:#FFF; opacity: 0.9;
	-moz-opacity: 0.9;
		filter:alpha(opacity=90);
	position: relative;
}
div#methode , div#objectifs{margin: 0 auto 0 50px;}
div#objectifs {width:800px;}
div#quisommesnous {width:700px;}

div#vision:hover , div#methode:hover , div#rejoindre:hover , div#objectifs:hover, div#quisommesnous:hover {
	opacity: 1;
	-moz-opacity: 1;
		filter:alpha(opacity=1);
}

div.cadre {float:left ; height:300px; 
	width:26% ; padding:0 2% 0 1% ; margin-right:4% ; 
	background-color:#ddd ; border-radius:10px }

div.cadre h3 {text-align:center;}

/* Qui sommes nous */
body#lecollectif div#content {	background-size:cover ;}
div.membre {float: left; width:200px; height:150px; margin:20px; padding: 0;
	background-image: url(../img/lecollectif/collectif.png) ; 
	background-size:cover ;
	background-color:rgba(0,0,0,0.4);
	color:white;
	font-size:20px;
}
div.membre p {margin:120px 10px 10px 10px; font-size:20px; font-weight: bold; text-shadow:1px -1px 0 black;}

div.membre2 {float: left; width:300px; height:225px; margin:20px 20px 120px 10px; padding: 0;
	background-image: url(../img/lecollectif/collectif.png) ; 
	background-size:cover ;
	background-color:rgba(0,0,0,0.4);
	color:white;
	font-size:20px;
	cursor: help;
}

div.membre2 p {margin:225px 0 0 0 ; height:80px; padding: 10px 10px 10px 20px; background-color:rgba(0,0,0,0.7);
	font-size:18px; font-weight: normal; text-shadow:1px -1px 0 black;}

div.membre2 p span.profession {font-size:12px;}

div.membre_zoom {position: fixed; width:100%; min-height:100%; top:150px; left:0; background-color:white; display: none;}
div.membre_zoom img { width:50%; float: left; margin-right: 5%;}
div.membre_zoom:hover {cursor: zoom-out;	}

/* presse */
div#menu_presse {clear:both;}
div#menu_presse h1{margin-left:20px;}
div#menu_presse img {width:13%; margin-right:1%;}
div.presse img {max-width: 100%;}
div.d {	margin: 0 50px 0 auto; width:50%;}

div#footer { margin: 0 auto; padding: 20px 20px ; width:940px ; 
	background-color:#FFF; border-top:5px solid #EEE;
	position: relative;
	font-size: 12px; text-align: center;
	}


/* tablette 100% = 70+30 */
@media (min-width: 601px) and (max-width: 980px)  { 
	div#header , div#content , div#footer { width:96% ;}
}

/* Mobile */
@media (max-width: 600px) { 
	div#header , div#content , div#content2 , div#content3 , div#content4 ,
	 div#content5 , div#content6, div#content7, div#content8, div#content9,
	 div#footer { 
		width:100% ; padding:20px 0; margin:0; }
	div#vision , div#methode , div#rejoindre, div#objectifs , div#quisommesnous, div.d { 
		 width:90% ; margin: 0 auto 20px auto}
	 div.cadre {float: none; ; height:auto; width:90% ; padding:10px 2%  ; margin:10px 0 ;  }

	
}

@media print { 
	
	.noprint, .bouton {display:none;}

	body { background-color: #fff!important; color: #000; }

	p, h1, h2, h3, h4, h5, h6, ul, ol {  color: #000 ; }
	li {margin-bottom:10px; }
	
	.print {
	  display: block; /* affichage des éléments de classe print */
	}
	
	ul, ol { 
	  page-break-inside: avoid; /* pas de coupure dans ces élements */
	}
	h1, h2, h3 {
	  page-break-after: avoid; /* pas de saut après ces éléments */
	}
	a { 
	  color: #000!important; text-decoration: none;
	}
	
}