/*
Violet	: #4D4861
Mauve 	: #9b8db5
2 : #a599bd
3 : #b0a5c4
4 : #bab1cc
5 : #c5bdd4
Argile 	: #BEA8A7
Sable	: #E2DCDE
Rose	: #F1E4E8
*/

body {
    background-color: #E2DCDE;
    color: #000000;
}

div#container{
	max-width: 1024px;
	margin: 0 auto;
}

.div-center {
	margin: 0 auto;	
}

.bold {
	font-weight: bold;
}

.margin-bottom {
	margin-bottom: 20px;
}

.header-img {
	width: 300px;
	margin: 2em auto;
}

img.img-illustration{
	margin-top: 15px;
	border: 1px solid #000000;
}

img.img-illustration-top{
	margin-top: 30px;
	border: 1px solid #000000;
}


img.img-picto-footer{
	display: block;
	float: left;
	margin-right: 20px;
	height: 60px;
}

img.img-logo-label {
	display: inline-block;
	height: 50px;
}

img.img-logo-baies {
	display: inline-block;
	height: 90px;
	margin-left: 20px;
	margin-right: 20px;
}

img.img-profil-baie {
	display: block;
	float: left;
	height: 263px;
	margin-right: 20px;
	border: 1px solid #000000;
}

img.img-profil-store {
	display: block;
	float: left;
	height: 200px;
	margin-right: 20px;
	border: 1px solid #000000;
}

div.box-info {
	border: 2px solid #b0a5c4;
	padding: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #ffffff;
	text-align: center;
	margin-top: 30px;
	font-style: italic;
	font-size: 1.1em;
}

.mygalleryImg{
	border: 1px solid #b0a5c4;
}

.padding-box-header {
	padding-left: 10px;
	padding-right: 10px;
}

/* -- BANNER --
 * The top banner with the headings. By using a combination
 * of `display: table;` and `display: table-cell;`, we can
 * vertically center the text.
 */
 .banner-accueil {
    text-align: center;
    
    width: 100%;
    display: table;
    background: transparent url('../img/banner-accueil-400.jpg') no-repeat; 
    background-size: cover;
    background-position: center;
    height: 400px;
    /*height: 100vh;*/ /* vh = viewport height */
    
    /* background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover; */
}

.banner-head {
    display: table-cell;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    font-family: james_fajardoregular, Arial, sans-serif;
	font-size: 8.5em;
	line-height: 0.7em;
    color: #9b8db5;
	text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83333px 0.983333px 0px, rgb(255, 255, 255) 2.35px 1.85px 0px, rgb(255, 255, 255) 1.61667px 2.51667px 0px, rgb(255, 255, 255) 0.7px 2.91667px 0px, rgb(255, 255, 255) -0.283333px 2.98333px 0px, rgb(255, 255, 255) -1.25px 2.73333px 0px, rgb(255, 255, 255) -2.06667px 2.16667px 0px, rgb(255, 255, 255) -2.66667px 1.36667px 0px, rgb(255, 255, 255) -2.96667px 0.416667px 0px, rgb(255, 255, 255) -2.95px -0.566667px 0px, rgb(255, 255, 255) -2.6px -1.5px 0px, rgb(255, 255, 255) -1.96667px -2.26667px 0px, rgb(255, 255, 255) -1.11667px -2.78333px 0px, rgb(255, 255, 255) -0.133333px -3px 0px, rgb(255, 255, 255) 0.85px -2.88333px 0px, rgb(255, 255, 255) 1.75px -2.43333px 0px, rgb(255, 255, 255) 2.45px -1.73333px 0px, rgb(255, 255, 255) 2.88333px -0.833333px 0px;
}

.banner-head-note {
	text-align: right;
    color: #ffffff;
}

.titre-menu {
    font-family: james_fajardoregular, Arial, sans-serif;
	font-size: 2.5em;
    color: #9b8db5;
	text-shadow: rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) 1.75px 0.966667px 0px, rgb(255, 255, 255) 1.08333px 1.68333px 0px, rgb(255, 255, 255) 0.133333px 2px 0px, rgb(255, 255, 255) -0.833333px 1.81667px 0px, rgb(255, 255, 255) -1.6px 1.2px 0px, rgb(255, 255, 255) -1.98333px 0.283333px 0px, rgb(255, 255, 255) -1.86667px -0.7px 0px, rgb(255, 255, 255) -1.3px -1.51667px 0px, rgb(255, 255, 255) -0.416667px -1.95px 0px, rgb(255, 255, 255) 0.566667px -1.91667px 0px, rgb(255, 255, 255) 1.41667px -1.41667px 0px, rgb(255, 255, 255) 1.91667px -0.566667px 0px;
}

.content {
	background: url('../img/blanc-85.png');
	border-top: 2px solid #008DD2;
	border-bottom: 2px solid #008DD2;
	padding-bottom: 30px;
}

.bg-photo-famille{
    display: table; 
	background: transparent url('../img/photo-famille-1024-600.jpg')no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh; /* vh = viewport height */
	
/*     background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover; */
}

.bg-blanc-transparent {
	background: url('../img/blanc-80.png');
	width: 70%;
	padding: 15px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}

.padding-box {
	padding-left: 30px;
	padding-right: 30px;
}

.padding-box-left {
	padding-left: 30px;
	padding-right: 15px;
}

.padding-box-right {
	padding-left: 15px;
	padding-right: 30px;
}

.div-footer {
	background-color: #605770;
}

.box-footer {
	width: 70%;
	margin: 30px auto;
}

.content p {
	text-align: justify;
}

.content p.left {
	text-align: left;
}

.content p.center {
	text-align: center;
}

table#table-tarifs {
	style=width: 100%;
}

table#table-tarifs tr td {
	padding: 10px;
}

table#table-tarifs thead {
	background-color: #b0a5c4;
	font-size: 1.3em;
	color: #FFFFFF;
	text-align: center;
}

.footer {
	border-top: 2px solid #008DD2;
    text-align: center;
    color: #ffffff;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #4D4861;
}

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family: 'PT Sans', Arial, sans-serif;
}

/*Styles for screen 768px and lower*/
@media screen and (max-width: 768px) {
	
	.padding-box-left {
		padding-left: 30px;
		padding-right: 30px;
	}
	
	.padding-box-right {
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media screen and (max-width: 400px) {
	.banner-head {
		font-size: 6.0em;
		line-height: 0.7em;
	}
	
}