/* =================== NOTRE GÉNEALOGIE • PAGE D'ACCUEIL ==================== */

/* Importation de polices */
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);

/* Body: texte petit et centré */
.smaller {
	font-size: 11px;
	font-family: Arial, Helvetica, Sans-Serif;
	}
/* 274 */
.center {
	text-align:center;
	}

.publicbody {
	padding: 0;
	margin:0;
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.11) 0, rgba(158, 135, 110, 0.16) 250px) no-repeat, url('../images/page.png'), -webkit-linear-gradient(top, #181510 0, #846F58 250px) no-repeat;
	background-attachment: fixed, fixed, fixed !important;
	}

.row {
	display: flex;
	width: 100vw;		/* force pleine largeur 'viewport'  */
	max-width: 100%;	/* prevenir le 'scrolling' horizontal dû au débordement du 'flexbox' */
	align-items: flex-start;
	box-sizing: border-box;
	padding:12px 12px 0 12px;
	}

.column-left {
	flex: 0 0 200px;	/* prevenir expansion ou rétrécir */
	}

.column-left img {
	max-width: 100%;
	height: auto;
	}

.column-middle {
	flex: 1;		/* expand ou rétrécit pour remplir l'espace libre */
	padding: 0 15px;	/* espacement optionel */
	}

.cb-headline {
	display: inline-block;
	min-width: 50px;
	top: 8px;
	left: 328px;
	line-height: 100%;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	z-index: 99;
	}

.cb-headline,
.cb-headline a,
.cb-headline a:link,
.cb-headline a:visited,
.cb-headline a:hover {
	font-size: 36px;
	font-family: 'Palatino Linotype', Georgia, 'Times New Roman', Times, Serif;
	font-weight: normal;
	font-style: normal;
	font-variant: small-caps;
	text-decoration: none;
	text-align: left;
	line-height: 120%;
	padding: 6px 0 12px 0;
	margin: 0;
	color: #E4DBCE !important;
	}

/* Arrière-plan du menu */
div.menucontainer {
	margin-bottom:12px;
	padding:0px;
	}

/* Ligne du menu */
div.innercontainer {
	background-color: #987e64;
	height: 25px;
	border-bottom: 1px solid #777;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	box-shadow: 2px 2px 3px 0px #666;
	text-decoration: none;
	}

/* Menu - Item 1 - Date automatique */
.devise-date {
	font-size: 14px;
	font-family: Arial, Helvetica, Sans-Serif;
	font-weight: normal;
	font-variant: small-caps;
	color: #E4DBCE !important;
	margin: 0;
	line-height: 100%;
	}

/* Menu - Items alignés à la droite */
.item-menu {
	font-size: 14px;
	font-family: Arial, Helvetica, Sans-Serif;
	margin: 0;
	font-weight: normal;
	font-variant: small-caps;
	text-decoration: none;
	line-height: 100%;
	}

div.liens a {
	color: #E4DBCE;
	}

div.liens a:hover {
	color: #ffdd44;
	}

div.liens-droite {
	display: flex;
/*	float: right; /* pas nécessaire */
	font-weight: bold;
	}

.liens-in-bar-left {
	margin-left:10px;
	}

.liens-in-bar-right {
	margin-right:10px;
	}

.clear {
	clear: both;
	}

.clearfix:before, .clearfix:after, .container:before, .container:after {
	content: "";
	display: table;
	}

.clearfix:after, .container:after {
	clear: both;
	}

/* FOOTER */
/* Ajout cadre layer 1, background et cadre brun */
.cb-tng-area {
	border: 3px solid #504335;
	color: #352B18;
	background:  url('../images/bg.png') scroll;
	border-collapse: separate;
	border-radius: 20px;
	margin: 7px 20px 5px 20px;
	padding: 5px 10px 10px 10px;
	}
.cb-footer-area {
	padding: 5px 10px 5px 10px;	/* marge du bas corrigée entre cadre layer 1 et cadre layer 2 blanc */
	}
/* Ajout cadre layer 2 over bg, fond blanc */
.titlebox {
	border: 1px solid silver;
	background-color: #f9f9f9;
	padding: 10px;
	margin: 1px;
	border-radius: 8px;
	}

/* Ajout cadre layer 3, fond beige */
.page-blocks {
	background-color: #f9f5f0;
	border: 1px solid silver;
	border-radius: 8px;
	}

/* Disposition du texte */
.cb-content-layout {
	display: table;
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	}
.cb-content .cb-postcontent-0 .layout-item-0 {
	border-top-style:solid;
	border-right-style:solid;
	border-bottom-style:solid;
	border-left-style:solid;
	border-width:3px;
	border-color:#504335;
	color: #352B18;
	background:  url('../images/bg.png') scroll;
	border-collapse: separate;
	border-radius: 20px;
	}

.cb-content-layout-row {
	display: table-row;
	}

.cb-layout-wrapper {
/*	margin: 12px auto 0 auto; /* Distance entre section menu et section centrale */
	position: relative;
	z-index: auto !important;
	}
/*
.cb-post
{
   background: #E7DDCA;
   background: transparent;
   -webkit-border-radius:2px;
   border-radius:2px;
   border:1px solid transparent;
   padding:0px 5px 5px 0px;
   margin:0px 15px 0px 15px;
}

.cb-content .cb-postcontent-0 .layout-item-1 {
	color: #352B18;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-radius: 4px;
}
*/
/* requis pour arrondir les coins des encadrés
.layout-item-1 {
	width: 33%;
}

.cb-layout-cell
{
   display: table-cell;
   vertical-align: top;
}

.cb-postcontent a, .cb-postcontent a:link
{
   font-family: Arial, Helvetica, Sans-Serif;
   text-decoration: none;
   color: #655543;
}

.cb-postcontent a:visited
{
   font-family: Arial, Helvetica, Sans-Serif;
   text-decoration: none;
   color: #655543;
}

.cb-postcontent  a:hover
{
   font-family: Arial, Helvetica, Sans-Serif;
   text-decoration: none;
   color: #655543;
/*   text-decoration: underline; /* Pour empêcher le souligné des boutons ACCÈS des encadrés
   text-decoration: none;
}
.cb-postcontent
{
   text-align: left;
}

.cb-postcontent,
.cb-postcontent li,
.cb-postcontent table,
.cb-postcontent a,
.cb-postcontent a:link,
.cb-postcontent a:visited,
.cb-postcontent a.visited,
.cb-postcontent a:hover,
.cb-postcontent a.hovered
{
   font-family: Arial, Helvetica, Sans-Serif;
}

.cb-postcontent h1
{
   color: #1F1A14;
   margin: 10px 0 0;
   font-size: 31px;
   font-family: 'Palatino Linotype', Georgia, 'Times New Roman', Times, Serif;
   font-variant: small-caps;
   text-align: center;
}

.cb-postcontent h1 a, .cb-postcontent h1 a:link, .cb-postcontent h1 a:hover, .cb-postcontent h1 a:visited
{
   font-size: 31px;
   font-family: 'Palatino Linotype', Georgia, 'Times New Roman', Times, Serif;
   font-variant: small-caps;
   text-align: center;
}

.cb-postcontent h2
{
   color: #1F1A14;
   margin: 10px 0 0;
   font-size: 26px;
   font-family: 'Palatino Linotype', Georgia, 'Times New Roman', Times, Serif;
   font-variant: small-caps;
   text-align: center;
}

.cb-postcontent h2 a, .cb-postcontent h2 a:link, .cb-postcontent h2 a:hover, .cb-postcontent h2 a:visited
{
   font-size: 26px;
   font-family: 'Palatino Linotype', Georgia, 'Times New Roman', Times, Serif;
   font-variant: small-caps;
   text-align: center;
}
*/
/* ENCADRÉS PARALLAX */
section.module.parallax {
	height: 600px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
/*	box-shadow: 0 14px 10px -10px rgba(0, 0, 0, 0.4);*/
	box-sizing: border-box;
}

/* Contrôle du lettrage de l'encadré principal*/
section.module p {
	font-family: "Cormorant Garamond", serif; font-size: 26px;
	letter-spacing: 1px;
	letter-spacing: 3px;
	color: #f2f1ec;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.row-opacity {
	background-color: rgba(0, 0, 0, 0.2);
	background-size: cover;
	height: 100%;
}

/* LAYOUT DES ENCADRÉS */
.container {
/*	width: 1260px; */
	width: 100%;
	display: flex;
	justify-content: center; /* Centrer horizontalement */
/*	margin: 0 auto; /* Enlever pour centrer l'encadré principal */
	clear:both;
}

/* Encadré principal, largeur*/
.contentBox2b {
/*	float: left;*/
/*	width: 48%; */
	width: 28%;
	padding: 0;
/*	margin: 0 0 0 2%; */
}

/* Encadré principal, style */
.callbox3 {
	width: 90%;
	padding: 10px 20px;
/*	margin: 80px auto 10px auto; */
	margin: 0px auto 0px auto;	/*Encadré principal hauteur */
	color: #ffffff;
	font-size: 18px;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 20px;
	box-shadow: 0 0 0 5px #4d4941 inset, 0 0 0 6px rgba(255, 255, 255, 0.6) inset, 0 0 40px #000000 inset, 0 10px 15px -10px rgba(0,0,0,0.4);
}

/* Transparence des encadrés */
.wow {
	opacity: inherit;
}
/* ANIMATION DES ENCADRÉS 
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2014 Daniel Eden */

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;} }

@keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;} }
.fadeIn {-webkit-animation-name: fadeIn; animation-name: fadeIn;}

@keyframes zoomIn {0% {opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3);}
  50% {opacity: 1;} }
.zoomIn {-webkit-animation-name: zoomIn; animation-name: zoomIn;}
/* Fin de l'animation des encadrés */

/* BOÎTES D'ACCÈS AUX 4 ARBRES */
.topsection {
/*	padding: 0 0 40px 0; */
	padding: 0 0 0px 0;	/*Distance au bas des 4 boîtes d'accès */
	width: 1200px;
/*	margin-top: -150px !important; */
	margin-top: -375px !important;	 /*Distance en haut des 4 boîtes d'accès */
	font: 36px 'Cormorant Garamond', Verdana, Helvetica, sans-serif;
	color: #fff;
	margin: 0 auto;
}
/* Encadré de l'arbre #1 */
.topcontentBox4a {
	float: left;
	width: 23%;
	padding: 0;
	margin: 0 1% 0 0;
}
/* Encadré de l'arbre #2 */
.topcontentBox4b {
	float: left;
	width: 23%;
	padding: 0;
	margin: 0 1% 0 1%;
}
/* Encadré de l'arbre #3 */
.topcontentBox4c {
	float: left;
	width: 23%;
	padding: 0;
	margin: 0 1% 0 1%;
}
/* Encadré de l'arbre #4 */
.topcontentBox4d {
	float: left;
	width: 23%;
	padding: 0;
	margin: 0 0 0 1%;
}

/* Format du texte des boîtes d'accès aux arbres */
h8 {
	font: 30px 'Raleway', Verdana, Helvetica, sans-serif;
	color: #666156;
	padding: 0;
	margin: 10px 0;
	padding: 5px 0;
	font-style:normal;
}

/* Flip-Flop des boîtes d'accès */
.flip-box {
	perspective: 1000px;
	transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	-webkit-transform-style: preserve-3d;
	color: #fff;
/*	font-size:26px;*/
	font-size:20px;
}

.flip-box-front {
	background:#9b8f7f linear-gradient(#9b8f7f, #666156, #4d4941);
	min-height: 250px;
	height: auto;
	box-shadow: 0px 1px 51.3px 5.7px rgba(137,143,156,.15);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: rotateX(0);
	-webkit-transform: rotateX(0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transition: transform .7s ease, -webkit-transform .7s ease;
	position: relative;
	border: 1px solid #343a50;
	border-radius: 8px;
}
.flip-box-inner {
	text-align: center;
	padding: 0 5px;
	border-radius: 2px;
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	perspective: inherit;
	-webkit-perspective: inherit;
	outline: transparent solid 1px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
	transform: translateY(-50%) translateZ(60px) scale(0.94);
}
.flip-box-title h8 {
	font-size: 20px;
/*	text-transform: capitalize; /* enlever la lette capitale des mots */
	-webkit-transition: all 0.7s ease 0s;
	transition: all 0.7s ease 0s;
	color: #fff;
}
.flip-box .section-title{
	margin-bottom:10px;
}

.flip-box-back {
	min-height: 250px;
	height: auto;
	box-shadow: 0px 1px 51.3px 5.7px rgba(137,143,156,.15);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: rotateX(0);
	-webkit-transform: rotateX(0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transition: transform .7s ease, -webkit-transform .7s ease;
	position: relative;
	border: 1px solid #343a50;
	border-radius: 8px;
}
.flip-box-back::before {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom,transparent -80%,#4d4941);
}
.flip-box-back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	border-radius: 8px;
}
.flip-box-back h8 {
	padding-bottom: 16px;
	padding-top: 0;
	font-size: 20px;
	color: #fff;
	margin-bottom: 0;
}
/* Style: HOVER du flip des boîtes */
.flip-box:hover .flip-box-front {
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
}
.flip-box:hover .flip-box-back {
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

/* Bouton "ACCÈS" sur le FLIP des boîtes */
.btn-small {
	position: relative;
	background: #4d4941;
	linear-gradient(#4d4941, #c2bba8);
	background-position: center;
	transition: background-color 0.8s;
	border: 1px solid #c2bba8;
	color: #fff!important;
	cursor: pointer;
	font-weight: normal;
	font-size: 85%;
	font-style: normal;
	text-decoration: none;
	padding: 5px;
	border-radius: 5px;
}
.btn-small:hover {
	background-color: #f2f1ec;
	background-image: radial-gradient(circle, transparent 1%, #f2f1ec 1%);
	background-position: center;
	background-size: 15000%;
	border: 1px solid #c2bba8;
	color: #4d4941!important;
	font-weight: normal;
	text-decoration: none;
}
.btn-small a {
	color: #ffffff;
	text-decoration: none !important;
	font-weight: normal;
	outline: none;
}											
.btn-small:active {
	transition: background-color 0s;
	background-color: #f2f1ec;
	background-size: 100%;
}
/* FIN BOÎTES D'ACCÈS AUX 4 ARBRES */
/*
.cb-footer {
   font-size: 13px;
   font-family: Arial, Helvetica, Sans-Serif;
   text-align: center;
   position: relative;
   margin:0px 15px 0px 15px; /* Largeur des cadres ajoutés au FOOTER (si margin:0 auto; => ça déborde!!!)
}

. img, img.cb-article, .cb-footer img
{
   margin: 5px 5px 5px 5px;
}
*/

/* ADAPTATION POUR APPAREILS */
/* Pour coding des éléments de base */
@media (max-width: 975px) {
	.layout-item-1 {
		width: 95%;
	}
	.cb-layout-cell, .cb-content-layout-row {
		display: block;
	}
   .column-left {
      flex: 0 0 100px;
   }
   .column-left img {
      width: 100px;
      padding-top: 10px;
   }
   .cb-headline, .cb-headline a, .cb-headline a:link, .cb-headline a:visited, .cb-headline a:hover
   {
      font-size: 24px;
   }
}

@media (max-width: 430px) {
	.layout-item-1 img {
		width: 100%;
	}
	.cb-content .cb-postcontent-0 .layout-item-0 {
		border: none;
	}
	.cb-content .cb-postcontent-0 .layout-item-1 {
		padding-top: 0px;
	}
}