/* CSS Document */
html {
	height: 100%;
}
body {
	min-height: 100%;
}
body {
	margin: 0;
	padding: 0;
}
* {
	box-sizing: border-box
}
.container {
	padding: 1em 0;
}
.accueil #logo-acceuil .titre {
	font-weight: 900;
	display: block
}
.accueil #logo-acceuil .sous-titre {
	font-size: 12px;
	line-height: 16px;
	color: #fff;
}

@media screen and (max-width:599px) {
.accueil {
	display: block;
	margin: 0 auto;
}
.accueil a {
	display: block;
	color: #fff;
	position: relative;
	text-transform: uppercase;
	font-weight: 700;
}
.accueil a:before {
	display: inline-block;
	content: "";
	background: red;
	width: 75px;
	height: 75px;
	margin-right: .7em
}
.accueil a:after {
	display: inline-block;
	content: "";
	width: 75px;
	height: 75px;
	position: absolute;
	left: 0;
	top: 0
}
.accueil a:hover {
	text-decoration: none;
}
#points-interet a:before {
	background: #018bca url("../images/interface/menu/batiments-lieux.png") no-repeat center center;
	background-size: cover;
}
#secteurs a:before {
	background: #98d65b url("../images/interface/menu/secteurs.png") no-repeat center center;
	background-size: cover
}
#personnages a:before {
	background: #01af7e url("../images/interface/menu/personnages.png") no-repeat center center;
	background-size: cover
}
#points-interet a:after {
	background: rgba(1,119,191, .65);
	transition: all .3s ease;
}
#secteurs a:after {
	background: rgba(91,178,34,.65);
	transition: all .3s ease;
}
#personnages a:after {
	background: rgba(0,122,63, .65);
	transition: all .3s ease;
}
#points-interet a:hover:after {
	background: #0177bf
}
#secteurs a:hover:after {
	background: #5bb222
}
#personnages a:hover:after {
	background: #007a3f
}
.accueil section {
	margin: 0 0 .5em 50px;
}
.accueil #logo-acceuil {
	height: 148px;
}
.accueil #logo-acceuil {
	position: relative;
}
.accueil #logo-acceuil .titre,
.accueil #logo-acceuil .titre-en {
	background: url("../images/interface/logo-mrvs.svg")no-repeat left top;
	width: 100%;
	height: 90px;
	position: absolute;
	margin-right: 0;
	bottom: 6px;
	left: -48px
}
.accueil #logo-acceuil .titre-en {
	background: url("../images/interface/logo-mrvs-en.svg")no-repeat left top;
}
}
#contenu {
	min-height: 80vh;
	margin: auto;
	display: flex
}
.logo-ville-musee .container-fluid {
	max-width: none;
	padding: 1em 15px;
	display: flex;
	justify-content: center;

}

@media screen and (min-width:600px) {
.accueil {
	display: flex;
	margin: 0 0 0 50px;
	justify-content: center;
	width: 263px;
	flex-wrap: wrap;
}
.accueil section {
	width: 263px;
	text-align: left;
	margin: 1em;
}
.accueil section a {
	display: flex;
	align-items: flex-end;
	align-content: stretch;
	width: 100%;
	height: 100%;
	text-decoration: none;
}
.accueil section a span {
	display: block;
	padding: 2em .5em 0 0;
	text-align: right;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	width: 100%;
	font-weight: 700;
	font-size: 1.25em;
	line-height: .9em
}
.accueil {
	display: flex;
	margin: auto;
	justify-content: center;
	width: 600px;
	flex-wrap: wrap
}
.accueil section {
	width: 210px;
	text-align: center;
	height: 210px;
	margin: 1em;
	display: flex;
	align-items: flex-end;
	align-content: stretch;
	position: relative
}
.accueil #logo-acceuil {
	flex-direction: column;
}
.accueil #logo-acceuil span {
	text-align: left
}
.container {
	width: 430px;
	margin: 0 auto;
	text-align: right;
}
.accueil #logo-acceuil .titre,
.accueil #logo-acceuil .titre-en {
	background: url("../images/interface/logo-mrvs.svg")no-repeat left top;
	width: 300px;
	height: 120px;
	position: absolute;
	left: -62px;
	bottom: 0;
	margin-right: 0
}
.accueil #logo-acceuil .titre-en {
	background: url("../images/interface/logo-mrvs-en.svg")no-repeat left top;
}
.accueil #logo-acceuil .sous-titre {
	font-size: 17px;
	line-height: 22px;
}
#points-interet {
	background: #018bca url("../images/interface/menu/batiments-lieux@2x.png") no-repeat center center;
	background-size: cover;
}
#secteurs {
	background: #98d65b url("../images/interface/menu/secteurs@2x.png") no-repeat center center;
	background-size: cover
}
#personnages {
	background: #01af7e url("../images/interface/menu/personnages@2x.png") no-repeat center center;
	background-size: cover
}
#points-interet a {
	background: rgba(1,119,191, .65);
	transition: all .3s ease;
}
#secteurs a {
	background: rgba(91,178,34,.65);
	transition: all .3s ease;
}
#personnages a {
	background: rgba(0,122,63, .65);
	transition: all .3s ease;
}
#points-interet a:hover {
	background: #0177bf
}
#secteurs a:hover {
	background: #5bb222
}
#personnages a:hover {
	background: #007a3f
}
footer .container-fluid {
	padding-top: 1em ;
	padding-bottom: 1em ;
}
}
#contenu {
	background: #262626 url("../images/contenu/accueil/fond-header-accueil-height480.jpg")no-repeat left center;
	background-size: cover;
	padding: 2em 0;
	transition: all .3s ease
}

@media screen and (min-width:768px) {
#contenu {
	background: #262626 url("../images/contenu/accueil/fond-acceuil-768px.jpg")no-repeat left center;
	background-size: cover;
}
}

@media screen and (min-width:900px) {
#contenu {
	background: #262626 url("../images/contenu/accueil/fond-accueil.jpg")no-repeat left center;
	background-size: cover;
}
}
.logo-ville-musee {
	background: #fff;
	text-align: center
}
.logo-accueil {
	display: inline-block;
	max-width: 100%;
	height: 50px;
	margin: .5em 0;
}
.logo-accueil:nth-child(1) {

	height: 45px;

}
.logo-accueil:nth-child(2) {

	height: 35px;

}
.logo-accueil:nth-child(3) {

	height: 45px;

}
footer {
	background: #cecece url("../images/interface/fond-footer@2x.png") no-repeat left top;
	background-size: cover;
	color: #000;
	padding: 0
}