@charset "UTF-8";

body {
	position: relative; 
	margin: auto;
	padding-right: 0px;
	padding-left: 0px;
	width: 100%;
	font: 1em Arial, Verdana, sans-serif;
	background: url(img/concrete_wall_2.png) repeat;
}

/* ---------------- Couleur pour le site ----------------

Bleu : #2f5196;
Jaune : #f4c143;
Gris : #212121;

*/

/* ---------------- FONTS ---------------- */
@font-face {
	font-family: 'fontastique';
    src: url('Font/fontastique-webfont.eot');
	src: url('Fontfontastique.otf') format('truetype'),	
		 url('Font/fontastique-webfont.woff') format('woff'), 
    	 url('Fontfontastique-webfont.eot?#iefix') format('embedded-opentype'), 
         url('Fontfontastique-webfont.svg#fontastique') format('svg');     
    font-weight: normal;
    font-style: normal;
}

/* ---------------- DIVERS ---------------- */
.bandePleine {
	padding-right: 0px;
	padding-left: 0px;
}
.row {
	margin-right: 0px;
	margin-left: 0px;
}

.bleu {
	font-family: "fontastique";
	color: #fff;
	background-color: #2f5196;
}
.jaune {
	font-family: "fontastique";
	color: #fff;
	background-color: #f4c143;
}
h1, h2 {
	font-family: "fontastique";
}
h3 {
	font-size: 20px;
	font-family: "fontastique";
	color: #2f5196;
}
p {
	margin: 5px 0px;
}
a:hover {
	color: #f4c143;
}

/*  -----------------------   480px   ----------------------- */
/* ----------------	HEADER ---------------- */
.imageHeader {
	padding-top: 200px;
	height: 600px;
	text-align: center;
}
.logo {
	width: 70%;
}
.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5);
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: rgba(47, 81, 150, 0.95);
}

/* ----------------	SECTION ---------------- */
.titrePrincipal {
	margin-bottom: 40px;
	border-bottom: none;
}
.titre1 {
	margin: 40px 0px 10px 0px;
	font-size: 30px;
	font-weight: bold;
	font-family: "fontastique";
	color: #212121;
}
.titre2 {
	font-size: 20px;
	font-weight: bold;
	font-family: "fontastique";
	color: #2f5196;
}
.texte {
	font-size: 20px;
	text-align: justify;
	line-height: 1.8;
	color: #212121;
}
.slide {
	margin: 100px 0px;
}
.btnCustom {
	margin: 10px 0px;
	font-size: 25px;
	font-family: "fontastique";
	color: #fff;
	background-color: #2f5196;
}
.memoMobile {
	margin-top: 80px;
	padding-top: 60px;
	width: 442px;
	height: 249px;
	font: 35px "fontastique";
	text-align: center;
	color: #fff;
	background: url(img/fondMemoMobile.png) center no-repeat;
}
.gallery-container img {
	margin: 5px 0px;
}
#ui-datepicker-div {
	padding: 15px;
	background-color: #fff;
	border: 4px solid rgba(47, 81, 150, 0.69);
	border-radius: 10px;
}

/* ----------------	FOOTER ---------------- */
.deco {
	height: 381px;
	background: url(img/deco-mobile-footer.png) bottom center no-repeat, url(img/déco-footer-sol.png) bottom repeat-x;
}
footer {
	padding: 30px 0px;
	font-size: 18px;
	text-align: center;
	color: #fff;
	background-color: #212121;
	justify-content: center;
}
footer p {
	line-height: 1.6;
}
#map-container {
	margin: auto; 
	width: 400px;
	height: 400px;
}

/*  ----------------  En bas 460px   ---------------- */
@media screen and (max-width: 460px) {
	/* ----------------	HEADER ---------------- */
	.logo {
		width: 100%;
	}

	/* ----------------	SECTION ---------------- */
	.memoMobile {
		padding-top: 70px;
		font: 30px "fontastique";
	}
	
	/* ----------------	FOOTER ---------------- */
	#map-container {
		margin: auto; 
		width: 300px;
		height: 300px;
	}
}

/*  -----------------------  En haut 576px SM  ----------------------- */
@media screen and (min-width: 576px) {
	/* ----------------	HEADER ---------------- */
	.logo {
		width: 70%;
	}
	
	/* ----------------	SECTION ---------------- */
	.titre1 {
		margin-top: 30px;
		font-size: 45px;
	}
	.titre2 {
		font-size: 30px;
	}

	/* ----------------	FOOTER ---------------- */
	footer p {
		line-height: 1.8;
	}
}

/*  -----------------------  En haut 768px MD  ----------------------- */
@media screen and (min-width: 768px) {
	/* ----------------	HEADER ---------------- */
	.imageHeader {
		padding-top: 110px;
		height: 530px;
	}

	/* ----------------	SECTION ---------------- */
	.titrePrincipal {
		border-bottom: 3px solid #2f5196;
	}
	.texte {
		line-height: 1.6;
	}
	.slide {
		margin: 120px 0px;
	}
	.btnCustom {
		margin: 60px 0px;
	}

	/* ----------------	FOOTER ---------------- */
	.deco {
		height: 470px;
		background: url(img/deco-ipad-footer.png) bottom center no-repeat, url(img/déco-footer-sol.png) bottom repeat-x;
	}
	#map-container {
		width: 700px;
	}
}
/*  -----------------------  En haut 868px  ----------------------- */
@media screen and (min-width: 868px) {
	/* ----------------	HEADER ---------------- */
	.imageHeader {
		height: 600px;
	}

	/* ----------------	SECTION ---------------- */
	.titre1 {
		margin-top: 30px;
		font-size: 40px;
	}
	.titre2 {
		font-size: 25px;
	}
}

/*  -----------------------  En haut 992px LG  ----------------------- */
@media screen and (min-width: 992px) {
	/* ----------------	HEADER ---------------- */
	.imageHeader {
		height: 600px;
	}
	ul {
		text-align: right;
	}

	/* ----------------	SECTION ---------------- */
	.titrePrincipal {
		margin-bottom: 60px;
		border-bottom: 3px solid #2f5196;
	}
	.texte {
		line-height: 1.8;
	}
	.btnCustom {
		margin: 60px 0px;
	}

	/* ----------------	FOOTER ---------------- */
	.deco {
		height: 509px;
		background: url(img/bureau-tente.png) bottom left no-repeat, url(img/bureau-arbre.png) bottom left repeat-x, url(img/déco-footer-sol.png) bottom repeat-x;
	}
}

/*  -----------------------  En haut 1200px XL  ----------------------- */
@media screen and (min-width: 1200px) {
	/* ----------------	HEADER ---------------- */
	.imageHeader {
		height: 720px;
	}

	/* ----------------	SECTION ---------------- */
	.slide {
		margin: 150px 0px;
	}

	/* ----------------	FOOTER ---------------- */
	#map-container {
		width: 900px;
	}
}
/*  -----------------------  En haut 1430px  ----------------------- */
@media screen and (min-width: 1430px) {
	/* ----------------	HEADER ---------------- */
	.imageHeader {
		height: 880px;
	}
	ul li {
		padding: 0px 15px;
		font-size: 20px;
	}

	/* ----------------	SECTION ---------------- */
	.titre1 {
		font-size: 60px;
	}
	.titre2 {
		font-size: 35px;
	}
	.titreSection1 {
		font-size: 40px;
	}
	.texte {
		font-size: 22px;
	}
	.btnCustom {
		margin: 80px 0px;
		padding: 15px 20px;
	}
}
/*  -----------------------  En haut 1680px  ----------------------- */
@media screen and (min-width: 1680px) {
	/* ----------------	HEADER ---------------- */
	.imageHeader {
		height: 1000px;
	}

	/* ----------------	SECTION ---------------- */
	.titreSection1 {
		font-size: 60px;
	}
	.texte {
		font-size: 25px;
	}

	/* ----------------	FOOTER ---------------- */
	#map-container {
		width: 1400px;
	}
}