/*	svp, prendre une copie du modèle 00 et créer le vôtre à la fin en incrémentant 00 merci */
div.m00
{
padding: 1rem;	/*	padding par défaut */
}
div.m00-overflow /*	div spéciale pour scroller en x */
{
padding: 1rem;
overflow-x: auto;
}
/*	la div h00 sert au titre si on a besoin de plusieurs balises dans la partie titre, sinon la h seule*/

div.h00
{

}
div.h00 h1
{
font-size: ;
line-height: ;/*	<= font-size + padding */
}
div.h00 h2
{

}
div.h00 hr
{
width:50%;
margin: 0 auto;
color: pink;
}
/************************************************************************************************************/
div.grille00
{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
div.grille00 figure
{
margin: 0.5rem;	/*	margin des colonnes, donne donc 1rem MINIMUM (0.5rem + 0.5rem) entre 2 colonnes*/
text-align: center;	/* pour centrer l'image et le texte dans la colonne */
width: 140px;	/* 	la largeur minimum est de 100px mais cela dépend de l'icone ou de l'image,
					du texte à afficher, un titre simple en petit font size, va entrer dans 100px
					on fonctionne en px fixe ici, PAS DE POURCENTAGE*/
/*width: 270px;	/*	la largeur MAXIMUM pour les cellulaires est de 320px en comptant les marges
					ce qui donne donc un grand maximum de 270px par colonne (1rem = +/- 10px)
					car il faut compter les marges des conteneurs de la grille fixée au minimum à 1rem
					il est désagréable de refaire tout le style quand il ne répond pas aux limites...*/
}
div.grille00 img	/* 	il n'est d'usage d'utiliser une image plus grande que 270px dans le flex pour
					avoir un responsive convenable, il faut utiliser un autre modèle si nous avons
					des images plus larges que 270px, on fonctionne en px fixe ici, PAS DE POURCENTAGE*/
{

}
div.grille00 figcaption	/* 	figcaption hérite de son parent figure. En remettant ici le texte à gauche
						il n'y aura que l'image centrée dans la colonne
						on fonctionne en px fixe ici, PAS DE POURCENTAGE*/
{
text-align: left;
}
/************************************************************************************************************/
div.float00
{

}
div.float00 div.float-left
{
float: left;
padding-right: 0.5rem;
width: 49%; /* laisser 1% aux marges*/
}
/*					le responsive assigne les 2 div enfants float-left et float-right 
					on n'a donc pas besoin de rajouter du code dans responsive.css */
div.float00 div.float-right
{
float: right;
padding-left: 0.5rem;
width: 49%;
}
div.float-left img
, div.float-right img
{
width: 100%;
}
div.float-stop
{
clear: both;
}
/************************************************************************************************************/
div.m00-overflow /*	div spéciale pour scroller en x, remplacez m00 par m00-overflow */
{
padding: 1rem;
overflow-x: auto;
}

table.table00
{
border: 1px solid black;
/*border-collapse: collapse;*/
/*border-collapse: separate;*/
/*border-spacing: 10px 50px;*/
/*empty-cells: hide;*/
/*table-layout: fixed;*/
width: 100%;	
}
table.table00 tr /*	row, ligne */
{

}
table.table00 tr:nth-child(even) /* OU odd */
{
/*background-color: yellow*/
}
table.table00 tr:hover
{
/*background-color: green;*/
}
table.table00 tr.ligne00 /*	si nous avons une ligne particulière que nous désirons styliser */
{
	
}
table.table00 th /* header, titre */
{
border-bottom: 1px solid grey;
/*border: 1px solid black;*/
/*height: 50px;*/
text-align: left;
vertical-align: middle;
padding: 8px 15px;
/*background-color: blue;*/
/*color: white;*/
}
table.table00 td /* data, cellule */
{
border-bottom: 1px solid grey;
/*border: 1px solid black;*/
/*height: 30px;*/
/*text-align: center;*/
/*vertical-align: bottom;*/
padding: 8px 15px;
}
table.table00 td img/* image dans le cellule, on ne dépasse pas 270px pour le responsive */
{
width: 100%;
max-width: 270px;
max-height: 200px;
}
table.table00 td.cell00 /*	si nous avons une cellule particulière que nous désirons styliser */
{
padding: 0;
width: 270px;
max-width: 270px;
}
/************************************************************************************************************/
div.xtableau00 
{
border-top: 1px solid black; /*	cadre autour du tableau sauf pour le bottom */
border-right: 1px solid black;
border-left: 1px solid black;
/*border-bottom: 1px solid black;*/
/*	si on ne met pas de border-bottom aux lignes mais qu'on veut tout de même
	le bas du cadre pour le tableau, il faut enlever le commentaire ci-haut*/
}
div.xtableau00 div.xt
{
display: flex;
border-bottom: 1px solid black; /*	si on veut une barre sous la ligne titre*/
}
div.xtableau00 div.xl
{
display: flex;
border-bottom: 1px solid black; /*	si on veut une barre sous la ligne du tableau*/
}
			/*	2colonnes 49%, 3colonnes 33%, 4colonnes 24%, 5colonnes 19% */			
div.xtableau00 div.xc1
, div.xtableau00 div.xc2
, div.xtableau00 div.xc3 
{
width: 33%;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
border-right:  1px solid black;
}
div.xtableau00 div.xc3 /*		voici la dernière cellule à la droite du tableau 
							cette dernière cellule annule le border 
							si vous avez plus que 3 colonnes,
							changer xc3 pour le nom de la dernière cellule*/
{
border-right:  0px solid black;
}
div.xtableau00 div.xt div.xc1
, div.xtableau00 div.xt div.xc2
, div.xtableau00 div.xt div.xc3 /*	cellules de la ligne titre xtitle xt */
{
font-weight: bold;
}
div.xtableau00 div.xc1
{

}
div.xtableau00 div.xc2
{

}
div.xtableau00 div.xc3
{

}
/************************************************************************************************************/
div.ftableau00 
{
visibility: hidden; /* le ftableau sera visible sous les 765px*/
height: 0px;
}
div.ftableau00 
{
border-top: 1px solid black; /*	cadre autour du tableau sauf pour le bottom */
border-right: 1px solid black;
border-left: 1px solid black;
/*border-bottom: 1px solid black;*/
/*	si on ne met pas de border-bottom aux lignes mais qu'on veut tout de même
	le bas du cadre pour le tableau, il faut enlever le commentaire ci-haut*/
}
div.ftableau00 div.xt
{
display: flex;
border-bottom: 1px solid black; /*	si on veut une barre sous la ligne titre*/
}
div.ftableau00 div.xl
{
display: flex;
border-bottom: 1px solid black; /*	si on veut une barre sous la ligne du tableau*/
}			
div.ftableau00 div.xc1
, div.ftableau00 div.xc2
, div.ftableau00 div.xc3 
{
width: 99%;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
div.ftableau00 div.xt div.xc1
, div.ftableau00 div.xt div.xc2
, div.ftableau00 div.xt div.xc3 /*	cellules de la ligne titre xtitle xt */
{
font-weight: bold;
}
div.ftableau00 div.xc1
{

}
div.ftableau00 div.xc2
{

}
div.ftableau00 div.xc3
{

}
/************************************************************************************************************/
/*			V o t r e		c o d e		v a		à	p a r t i r		d ' i c i			*/
/**/

h1, h2, h3, h4, h5
{
    font-family: 'josefin_sanssemibold';
}

a
{
    transition-duration: 0.2s;
}

div.m01
{
padding: 5rem 2rem;	/*	padding par défaut */
text-align: center;
margin: 0 px auto;
}
div.h01
{

}
div.h01 h2
{
font-size: ;
line-height: ;/*	<= font-size + padding */
}

div.h01 hr
{
width:40px;
margin: 0 auto;
border: solid 2px #d9a234;
}
div.h02
{
margin: 40px auto;
text-align: center;
width: 75%;
}

div.m04
{
padding: 5rem 1rem;	/*	padding par défaut */
text-align: center;
margin: 0px auto;
}
div.h04
{

}
div.h04 h3
{
font-size: ;
line-height: ;/*	<= font-size + padding */
}

div.h04 hr
{
width: 80px;
margin: 0 auto;
border: solid 2px #d9a234;
}
div.h05
{
margin: 35px auto;
text-align: center;
width: 75%;
}
div.m04 a
{
color: white;
background-color: #d9a234;
padding: 5px 10px;
border: 1px solid #d9a234;
}

div.m04 a:hover, div.m08 a:hover
{
    background: transparent;
    color: #d9a234;
}

div.m06
{
padding: 1rem;	/*	padding par défaut */
text-align: center;
margin: 0px auto;
width: 50%;
}
div.h06
{
padding: 1rem;	/*	padding par défaut */
text-align: center;
margin: 0px auto;
font-size: 3rem;
}
div.h06 img
{
vertical-align: middle;
}
div.m07
{
padding: 1rem;	/*	padding par défaut */
text-align: center;
margin: 0px auto;
}
div.h07
{
padding: 1rem;	/*	padding par défaut */
text-align: center;
margin: 0px auto;
}
div.h07 hr
{
width: 80px;
margin: 0 auto;
border: solid 2px #d9a234;
}
div.m08
{
padding: 1rem;	/*	padding par défaut */
width: 80%;
margin: 0 auto;
}
div.float08 div.float-left
{
float: left;
/*margin: 0 auto;*/
padding-right: 0.5rem;
width: 49%; /* laisser 1% aux marges*/
}
div.float08 div.float-right
{
float: right;
/*margin: 0 auto;*/
padding-left: 0.5rem;
width: 49%; /* laisser 1% aux marges*/
}
div.float08 div.float-right img
{

width: 99%; 
}
div.m08 a
{
padding: 1rem;	/*	padding par défaut */
color: white;
background-color: #d9a234;
padding: 5px 10px;
border: 1px solid #d9a234;

}

div.m09
{
padding: 1rem;	/*	padding par défaut */
color: white;
}
div.m09 a
{

color: white;
}
div.m09 hr
{
width:10%;

border: solid 1px #d9a234;
}
div.m10
{
text-align: center;
padding: 1rem;	/*	padding par défaut */
color: white;
margin: 0 auto;
}
div.m10 a
{

color: white;
}
div.m10 hr
{
width:10%;
margin: 0 auto;
border: solid 1px #d9a234;
}
div.m11
{
padding: 1rem;	/*	padding par défaut */
color: white;
}
div.m11 a
{
color: white;
}

div.m11 a:hover
{
    color: #d9a234;
}

div.m11 hr
{
width:20%;

border: solid 1px #d9a234;
}

/*#b90adresse3::before
{
    content: '';
    width: 2px;
    height: 80px;
    display: block;
    position: absolute;
    top: 13px;
    background: #d9a234;
}*/

.img-wrap
{
    overflow: hidden;
}

.img-villa
{
    transition: transform .5s ease;
}

.img-villa:hover
{
    transform: scale(1.2);
}

/*** separator shafow header ***/
#js-mainnav.megamenu-sticky, #a60menuw
{
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

/*** La région ***/

.banner-region
{
    background-image: url(../../../images/tmpl/pouldu_fond.jpg);
     background-position: center;
    background-size: cover;
    padding: 20rem 0;
    text-align: center;
    width: 100% !important;
    color: #fff;   
}

.banner-region h1
{
    padding: 0 5rem;
}

.intro-region
{
    width: 80%;
    margin: 5rem auto;
    text-align: center;
    line-height: normal;
    font-size: 2.5rem;
}

.pouldu-pres
{
    width: 80%;
    margin: auto;
    overflow: auto;
    display: flex;
    margin-bottom: 5rem;
}

.text-pouldu
{
    width: 60%;
    float: left;
    padding: 3rem;
    box-sizing: border-box;
    background: #eee;
}

.img-float
{
    width: 40%;
    float: right;
}

.img-float img 
{
    display: block;
    width: 100%;
    height: 100%;
}

.text-pouldu hr
{
    width: 50px;
    border: solid 2px #d9a234;
    margin: 2rem 0;
}

.les-plages hr
{
    width: 50px;
    border: solid 2px #d9a234;
    margin: 2rem auto;
}

.les-plages h2
{
    text-align: center;
}

.text-plage
{
    width: 60%;
    float: right;
    padding: 3rem;
    box-sizing: border-box;
    background: #eee;
}

.text-plage h3
{
    margin-bottom: 1rem;
    color: #d9a234;
}

.img-plage
{
    width: 40%;
    float: left;
}

.img-plage img
{
    height: 100%;
    display: block;
    width: 100%;
}

.plages-wrap
{
    width: 80%;
    margin: auto;
}

.plage-item
{
    display: flex;
    overflow: auto;
    margin: 3rem 0;
    max-height: 350px;
}

/***** VILLA LANN MARCH *******/

.banner-lann-march
{
    background-image: url(../../../images/tmpl/banner_lann-march.jpg);
     background-position: center;
    background-size: cover;
    padding: 25rem 0;
    text-align: center;
    width: 100% !important;
    color: #fff;  
    position: relative;
}

.banner-lann-march h1
{
   position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5rem;
    background: rgba(0,0,0,0.3);
    
}

.villa-content
{
    width: 80%;
    margin: 3rem auto;
}

.separator-title
{
    width: 50px;
    border: solid 2px #d9a234;
    margin: 2rem 0;
}

.infos-villa
{
    margin-top: 2rem;
    width: 65%;
}

.list-infos h4 
{
    text-transform: uppercase;
    margin: 1rem 0;
    color: #d9a234;
    font-size: 1.5rem;
}

.separator-list 
{
    border: 1px solid #eee;
    margin: 2rem 0;
}

.list-infos ul
{
    margin-left: 1rem;
}


/***** VILLA MAT PILOTE *****/

.banner-mat-pilote
{
    background-image: url(../../../images/tmpl/banner_mat-pilote.jpg);
     background-position: center;
    background-size: cover;
    padding: 25rem 0;
    text-align: center;
    width: 100% !important;
    color: #fff;  
    position: relative;
}

.banner-mat-pilote h1
{
   position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5rem;
    background: rgba(0,0,0,0.3);
}

.text-left 
{
    float: left;
    width: 55%;
    padding-right: 5rem;
    box-sizing: border-box;
}

.gallery-wrapper
{
    float: right;
    width: 45%;
}
div.tarifs
{

}
div.tarifs td
{
padding-left: 1rem;
}
.clear-div
{
    clear: both;
}


/****** VILLA BELLANGENET ******/

.banner-bellangenet
{
    background-image: url(../../../images/tmpl/banner_bellangenet.jpg);
     background-position: center;
    background-size: cover;
    padding: 25rem 0;
    text-align: center;
    width: 100% !important;
    color: #fff;  
    position: relative;
}

.banner-bellangenet h1
{
   position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5rem;
    background: rgba(0,0,0,0.3);
}


/**** slider - gallery ****/

#dj-slideshowThumbs5m308 .dj-slideshowThumbs-in, #dj-slideshowThumbs5m308 .dj-indicators, 
#dj-slideshowThumbs6m309 .dj-slideshowThumbs-in,#dj-slideshowThumbs6m309 .dj-indicators
{
    box-shadow: none;
}

#dj-slideshowThumbs5m308 .dj-navigation, 
#dj-slideshowThumbs6m309 .dj-navigation
{
    top: 40%;
}

#dj-slideshowThumbs5m308 .dj-indicators,
#dj-slideshowThumbs6m309 .dj-indicators
{
    padding: 8px 0;
    height: 47px;
}

#dj-slideshowThumbs5m308 .dj-indicators img, #dj-slideshowThumbs5m308 .dj-slide img.dj-image, #dj-slideshowThumbs5m308 .dj-slide a:hover img.dj-image,
#dj-slideshowThumbs6m309 .dj-indicators img, #dj-slideshowThumbs6m309 .dj-slide img.dj-image, #dj-slideshowThumbs6m309 .dj-slide a:hover img.dj-image,
#dj-slideshowThumbs6m309 .dj-indicators img
{
    display: block;
}

.mfp-close:hover
{
    background: none;
}

.mfp-arrow-right:hover, .mfp-arrow-left:hover
{
    background: #eee;
}


/******** CONTACT **********/

div.fox-container
{
    text-align: left;
}

div#fox-container-m229 .fox-form-stacked .controls, div#fox-container-m229 .fox-form-stacked .control-label
{
    float: none;
}

div#fox-container-m229 input[type="text"], div#fox-container-m229 textarea
{
    width: 100%;
    border: 1px solid #d9a234;
}

div#fox-container-m229 img.fox-item-captcha-img
{
    border: 0;
}

div#fox-container-m229 .btn
{
   background: #d9a234;
    padding: 5px 35px;
    text-shadow: none;
    border: 0;
    transition-duration: 0.3s; 
}

div#fox-container-m229 .btn span
{
    color: #fff;
}

div#fox-container-m229 .btn:hover
{
    background: #393533 !important;
}



.contact-infos 
{
    margin-top: 5rem
}

.contact-infos p
{
    margin-bottom: 2rem;
}

.contact-infos img
{
    margin-right: 2rem;
    vertical-align: middle;
}

.banner-contact
{
    background-image: url(../../../images/tmpl/banner-contact.jpg);
     background-position: center;
    background-size: cover;
    padding: 15rem 0;
    text-align: center;
    width: 100% !important;
    color: #fff;   
}