/* -------- BILLET PRÉSENTATION AUTEUR -------- */

		.menu {
			font: 95% warnulfregular;
			text-align: right;
			margin-top: -20px;
			margin-right: 0px; }
		.menu a { text-decoration: none; padding: 10px 10px 7px;
		color: black; font-family: warnulfsemibold; }
		.menu a:hover {	background-color: #111111; color: #ffffff; }

		.source1 a { background-color: #C5F9A9; }
		.inspiration1 a { background-color: #fcfb3b; }
		.inspiration-suite1 a { background-color: #ff330e; color: #ffffff; }
		.akklesia1 a { background-color: #ffd50c; }
		.but1 a { background-color: #c6fbfe; }				
		.methode1 a { background-color: #ffb6f1; }
		.actualite1 a { background-color: #ebf4e9; }
		.projet1 a { background-color: #f2ef3d; }
		.mecenat a { background-color: #ffffff; }

	   /*	Décalage de la cible des ancres en utilisant une div de 1px de hauteur : i1, i2, i3…
	   		2 solutoins CSS donc :
		   		1 - La prem!ère est plus complexe et demanderait
		   		aussi de rajouter une class suivante dans le html : <div id="i1" class="i1"></div>
	   			2 - La seconde demande moins de codes.
	   		
	   		1 solution Jquery
		   		Décalage de la cible des ancres en utilisant le script Jquery :
		   		J'ai finalement utiliser ce script que j'appelle dans le billet.
	   			Pour le décalage, c'est la valeur : scrollTop: target.offset().top-200

	   			Quand à la cible href, j'utilise ou :
			   		- Les i1, i2… vides de 1px de hauteur dont je m'étais d'avord servies
			   		  avec le css 'div:target".
		   			  Celui-ci n'est donc pas utiliser.
		   			- Directemetn les source1, inspiration1… que j'utilisait dès le début.
	   		*/

		/* Solutions 1 en CSS
		 .i1:before { 
			display: block; 
		 	content: " "; 
		  	height: 150px;
			margin-top: -150px;
		    visibility: hidden; } */
		    
		/* Solutions 2 en CSS
		 div:target { padding-top: 530px; margin-top: -530px; } */

		#i1, #i2, #i3, #i4, #i5, #i6, #i7, #i8, { height: 1px; }
		#i9 { height: 1px; }
		

		
	   /* Fin Décalage de la cible des ancres */

		
		#auteur-lib {
			background: #f9f9f9;
			border: 1px solid #A2A2A2; padding: 30px 0 20px;
			margin-right: 0;
			margin-left: 0;	}
		
		p.rotateD{
			font-size: 2.0em;
			-webkit-transform: rotate(-180deg);
    		-moz-transform: rotate(-180deg);
    		-ms-transform: rotate(-180deg);
    		-o-transform: rotate(-180deg);
			text-align: right;
}
		
		p.rotateG{
			font-size: 2.0em;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			text-align: left;
}

		#sous-titre-auteurs {
			text-align: center; font: 260% warnulfregular;
			margin-left: 0%;
			color: black;
			margin-bottom: -20px;
			margin-top: -20px; }

		#auteur-lib1 {
			background: #f9f9f9;
			border: 1px solid #A2A2A2; }
		
		#auteur-lib2 {
			background: #f9f9f9;
			border: 1px solid #A2A2A2; }


		.titres { font: 140% warnulfbold; text-align: center; color: black;	}
		
		.textes { font: 110% warnulfregular; line-height: 130%;
		color: black; text-align: center; }
		.textes a { font-family: warnulfbold; text-decoration: none !important; color: #00b3b3; }
		.textes a:hover {	text-decoration: none !important; color: #006767; }
		.textes a:visited {	text-decoration: none !important; }

		.box-titres {
			width: 200px;
			height: 30px;
			box-shadow: 0px 0px 5px 2px rgba(119, 119, 119, 0.74);
			-moz-box-shadow: 0px 0px 5px 2px rgba(119, 119, 119, 0.74);
			-webkit-box-shadow: 0px 0px 5px 2px rgba(119, 119, 119, 0.74);
			z-index: 10;
			background-color: white;
			margin-top: 10px;
			text-align: center;	}

		.box-textes {
			padding: 10px 20px;
			border: 1px solid #A2A2A2;
			box-shadow: 0px 0px 9px 2px rgba(119, 119, 119, 0.74);
			-moz-box-shadow: 0px 0px 9px 2px rgba(119, 119, 119, 0.74);
			-webkit-box-shadow: 0px 0px 9px 2px rgba(119, 119, 119, 0.74);
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;	}



		#source1 {
			position: relative;
			top: 150px;
			left: 61%; }
		#source1 a { text-decoration: none; }
		#source1:hover { background-color: #C5F9A9; }
		#source2 { 
			position: relative;
			width: 50%;
			top: 50px;
			margin: 0px 0px 140px 10%;
			background-color: #C5F9A9; }


		#inspiration1 {
			position: relative;
			top: -10px;
			left: 40%; }
		#inspiration1 a { text-decoration: none; }
		#inspiration1:hover { background-color: #fcfb3b; }
		#inspiration2 { 
			position: relative;
			width: 40%;
			margin-right: 10%;
			margin-left: 45%;
			margin-bottom: 50px;
			background-color: #fcfb3b;	}


		#inspiration-suite1 {
			position: relative;
			width: 250px;
			top: 100px;
			left: 56%; }
		#inspiration-suite1 a { text-decoration: none; }
		#inspiration-suite1:hover { background-color: #ff330e; color: white !important; }
		#inspiration-suite1:hover .titres { color: white !important; }
		#inspiration-suite2 {
			position: relative;
			width: 50%;
			margin-right: 20px;
			margin-bottom: 50px;
			margin-left: 5%;
			background-color: #ff330e; }


		.container-colonne { display: inline-block; }

		@media screen and (min-width:600px) {
		nav.akk {
		    float: left;
		    width: 40%;
		  	margin-left: 5%;  }
		section {
		    margin-left: 50%;
		  	margin-right: 10%; }
		}


		#akklesia1 {
			position: relative;
			top: 40px;
			left: 10%; }
		#akklesia1 a { text-decoration: none; }
		#akklesia1:hover { background-color: #ffd50c; }
		#akklesia2 {
			position: relative;
	        width: 100%;
			margin-top: 50px;
			margin-bottom: 40px;
			background-color: #ffd50c; }


		#but1 {
			position: relative;
			top: 40px;
			left: 0%; }
		#but1 a { text-decoration: none; }
		#but1:hover { background-color: #c6fbfe; }
		#but2 {
			position: relative;
			top: 50px;
		    width: 100%;
			margin-right: 0px;
			background-color: #c6fbfe; }
		
		
		#methode1 {
			position: relative;
			top: 120px;
			left: 70%; }
		#methode1 a { text-decoration: none; }
		#methode1:hover { background-color: #ffb6f1; }
		#methode2 {
			position: relative;
			top: 80px;
		    width: 100%;
			margin-top: 50px;
			margin-right: 0px;
			background-color: #ffb6f1; }
			
	
		#actualite1 {
			position: relative;
			top: 130px;
			left: 10%; }
		#actualite1 a { text-decoration: none; }
		#actualite1:hover { background-color: #ebf4e9; }
		#actualite2 {
			position: relative;
		    width: 65%;
			margin: 140px 20px 80px 15%;
			background-color: #ebf4e9; }

		#projet1 {
			position: relative;
			top: -10px;
			left: 40%; }
		#projet1 a { text-decoration: none; }
		#projet1:hover { background-color: #f2ef3d; }
		#projet2 { 
			position: relative;
			width: 40%;
			margin-right: 10%;
			margin-left: 45%;
			background-color: #f2ef3d; }

/* Bubble Float Bottom */
.hvr-bubble-float-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-bubble-float-bottom:before {
  position: absolute;
  z-index: -1;
  content: '';
  left: calc(50% - 10px);
  bottom: 0;
  border-style: solid;
  border-width: 0px 0px 0 0px;
  border-color: #ffffff transparent transparent transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-bubble-float-bottom:hover, .hvr-bubble-float-bottom:focus, .hvr-bubble-float-bottom:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  border-width: 10px 10px 0 10px;
  border-color: #111111 transparent transparent transparent;
}
.hvr-bubble-float-bottom:hover:before, .hvr-bubble-float-bottom:focus:before, .hvr-bubble-float-bottom:active:before {
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  border-width: 10px 10px 0 10px;
  border-color: #111111 transparent transparent transparent;
}