@font-face
{
	font-family: "28DaysLater" ;
	src: url("/fonts/28DaysLater.woff") ;
}

@font-face
{
	font-family: "Montserrat" ;
	src: url("/fonts/Montserrat-Regular.woff") ;
}

@font-face
{
	font-family: "Montserrat" ;
	font-style: italic ;
	src: url("/fonts/Montserrat-Italic.woff") ;
}

@font-face
{
	font-family: "Montserrat" ;
	font-weight: bold ;
	src: url("/fonts/Montserrat-Bold.woff") ;
}

@font-face
{
	font-family: "Montserrat" ;
	font-weight: bold ;
	font-style: italic ;
	src: url("/fonts/Montserrat-BoldItalic.woff") ;
}

body
{
	font-family: "Montserrat", "Verdana", "Helvetica", "Arial", sans-serif ;
	font-size: 1em ;
	margin: 0 ;
}

textarea, select, input
{
    font-family: "Montserrat", "Verdana", "Helvetica", "Arial", sans-serif ;
    font-size: 100% ;
    color: rgb(0,0,0) ;
}

a:link, a:visited
{
	text-decoration: none ;
}

a:link, a:visited
{
	color: rgb(179,72,45) ;
}

section a:hover
{
    background-color: rgb(220,220,220) ;
}

sup
{
    line-height: 0 ;
    font-size : 80% ;
}

/* ============================ HEADER ============================ */

header
{
	display: table ;
	margin: 0 ;
	width: 100% ;
	text-align: center;
	background-color: rgb(255,255,255) ;
	padding-top: 1.3rem;
	padding-bottom: 1.3rem;
}

footer
{
	color : black ;
}

header>div:first-of-type
{
	display: table-cell ;
	height: 5rem ;
	vertical-align: middle ;
}

/* Headercontent c'est un tableau avec trois colonnes :
	adress, logo & tabernacle, tous les dimanches */
header div.Headercontent
{
	display: table ;
	width: 80% ;
	margin:0 auto ;
}

header div.Headercontent>div
{
	display: table-cell ;
	vertical-align: middle ;
	color : black ;
}

/* Adresse */
header div.Headercontent>div:nth-of-type(1)
{
	width: 30% ;
}

header div.Headercontent>div:nth-of-type(1)>p
{
	text-align: left ;
	font-family: "Montserrat" ;
	color : #828282 ;
	font-size: 0.8em ;
	line-height: 1.4em ;
}

/* Logo & Tabernacle */
header div.Headercontent>div:nth-of-type(2)
{
	text-align: right ;
}

/* Tous les dimanches */
header div.Headercontent>div:nth-of-type(3)
{
	width: 30% ;
}
header div.Headercontent>div:nth-of-type(3)>p
{
	text-align: right ;
	font-family: "Montserrat" ;
	color : #828282 ;
	font-size: 0.8em ;
	line-height: 1.4em ;
}

header div.MpjLogo
{
	display: table ;
	margin:0 auto ;
}

header div.MpjLogo>div
{
	display: table-cell ;
	vertical-align: middle ;
}

header div.MpjLogo>div:nth-of-type(1)
{
	padding-right: 1em ;
}

header div.MpjLogo object
{
	pointer-events: none ;
}

header div.MpjLogo img
{
	height: 3.5em ;
}

header div.Headercontent img
{
	vertical-align: middle ;
}

header h1
{
	font-size: 1.5em ;
	margin-top: 0 ;
	margin-bottom: 0 ;
}

header p
{
	margin-top: 0 ;
	margin-bottom: 0 ;
}

header h1.mpj
{
	font-size: 1.9em ;
	font-family: "28DaysLater" ;
	font-weight: normal ;
	color: black ;
	text-align: center ;
}

header p.lorraine
{
	font-family: "28DaysLater" ;
	font-size: 0.9em ;
	font-weight: normal ;
	color: rgb(238,64,106) ;
	text-align: center ;
}

span.DateMarche
{
    font-family: "Montserrat" ;
	font-weight: bold ;
    letter-spacing: 0.1em;
	color: rgb(238,64,106) ;
}

/* ============================ FOOTER ============================ */

footer
{
	display: block ;
	margin: 0 ;
	padding: 0 ;
}

footer>div
{
	margin-top: 1em ;
	padding-bottom: 1em ;
	width: 100% ;
	border-top: 0.08em solid #464646 ;
	display: flex ;
	flex-direction: row ;
}

footer>div>div
{
	display: block ;
	width: calc(50% - 2rem) ;
	margin-left: 1rem ;
	margin-right: 1rem ;
}

footer>div>div>h2
{
	display: block ;
	text-align: center ;
	font-family: "Montserrat" ;
	font-size: 1.2em ;
	font-weight: bold ;
	color: #464646 ;
	margin-bottom: 0.3em ;
}

footer>div>div>h3
{
	display: block ;
	text-align: center ;
	font-size: 0.9em ;
	margin: 0 ;
	margin-bottom: 0.7em ;
}

footer>div>div>p
{
	display: block ;
	text-align: center ;
	font-size: 0.9em ;
	margin: 0 ;
}

footer>div>div>p img
{
	height: 2.5em ;
}

footer>div>div>p>a, footer>div>div>p>a:link, footer>div>div>p>a:visited
{
	color: black ;
}

footer>div>div>p>a:hover
{
    background-color: rgb(220,220,220) ;
}

.footer-icon
{
	pointer-events: none ;
	height: 1.7em ;
	vertical-align: middle ;
}

.footer-icon:hover
{
	filter: hue-rotate(346deg);
}

.footer-icon img
{
	height: 1.7em ;
}

/* ============================ BARRE DE MENU ============================ */

/* C’est le menu sur un écran large */

nav.menu-horizontal
{
  display: block ;
  text-align: center;
  background-color: rgb(89,86,144);
}

nav.menu-horizontal ul
{
  display: inline-block ;
  vertical-align: bottom ;
}

nav.menu ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(89,86,144);
  font-family: "Montserrat" ;
  font-weight: bold ;
  font-size: 0.85em ;
  letter-spacing: 0.2em;
}

nav.menu-horizontal ul li
{
  float: left;
  /* border-right: 1px solid #bbb; */
}

nav.menu ul li a
{
  display: block;
  color: white;
  text-align: center;
  padding:  2em 0.5em;
  text-decoration: none ;
}

/* Change the link color on hover */
nav.menu ul li a:hover
{
  background-color: rgb(72,68,150);
}

nav.menu-dropdown
{
	display : none ;
	text-align: center;
	background-color: rgb(89,86,144);
/*	position: absolute ;
	top: 0 ;
	left: 0 ;
*/
}

nav.menu-dropdown>div
{
	display: inline-block ;
	vertical-align: bottom ;
	margin-top : 0.5rem ;
	margin-bottom : 0.5rem ;
	position: relative;
}

nav.menu-dropdown object
{
	width: 4rem ;
	display: inline-block ;
	vertical-align: bottom ;
}

@media screen and (max-width: 50em)
{
	/* Cacher adress et tous les dimanches */
	header div.Headercontent>div:nth-of-type(1)
	{
		display: none ;
	}
	header div.Headercontent>div:nth-of-type(3)
	{
		display: none ;
	}

	/* C'est le drop-down menu sur un écran étroit */

	nav.menu-horizontal
	{
		display: none ;
	}
	
	nav.menu-dropdown
	{
		display : block ;
	}

	.dropdown-content
	{
		position : absolute ;
		left: -6rem ;	/* -8rem pour moitié de largeur + 2rem pour moitité de hamburger */
		right: 0 ;
		margin: 0 auto ;
		display : none ;
		width: 16rem ;
		z-index: 100 ;
	}

	nav.menu-dropdown ul li
	{
		display : block ;
		border-bottom: 1px solid #bbb;
		border-right: none;
	}

	nav.menu-dropdown>div:hover .dropdown-content
	{
		display : block ;
	}
}

/* ============================ PAGE CONTENTS ============================ */

h1.titpage
{
	font-family: "Montserrat" ;
	font-weight: bold ;
	text-align: center ;
	font-size: 2.2em ;
	color: #464646 ;
	margin-bottom: 0 ;
}

h1.titpage:after
{
	display: block ;
	content:"";
	height: 0.1em;
	width: 2em;
	margin-top: 0.5em ;
	margin-bottom: 1em ;
	margin-left: auto ;
	margin-right: auto ;
	border-bottom: 0.08em solid rgb(238,64,106);
}

h2
{
	font-family: "PlayfairDisplayBold" ;
	font-weight: bold ;
	text-align: left ;
	font-size: 1.6em ;
/*	font-style: italic ; */
}

/* ============================ BOUTON ============================ */

/** BOUTON **/

a.bouton, input.bouton
{
  margin-top: 1.5em ;
  display: inline-block ;
  background-color: rgb(238,64,106);
  color: white ;
  padding: 1.3em 2em ;
  font-family: "Montserrat" ;
  font-size: 0.85em ;
  letter-spacing: 0.3em;
  border: none ;
}

/* Change the link color on hover */
a.bouton:hover, input.bouton:hover
{
  background-color: rgb(190,57,89) ;
}

/* ============================ ENCADRÉ CORONA ============================ */

div.corona
{
	display: table ;
	width: 100% ;
	border: 1px solid #763265 ;
}

div.corona>div
{
	display: table-row ;
	background-color: #9CAB4B ;
	color: white ;
}

div.corona>div>div:first-of-type
{
	display: table-cell ;
	width: 3em ;
	vertical-align: top ;
	padding: 0.5em ;
}

div.corona>div>div:last-of-type
{
	display: table-cell ;
	vertical-align: middle ;
	padding: 0.5em ;
}

div.corona img
{
	height: 3em ;
	vertical-align: bottom ;
}

div.corona p
{
	margin: 0 ;
	padding: 0 ;
}

/* ============================ GALLERIE ============================ */

h2.tit-gallerie
{
	margin-top: 2rem ;
	margin-bottom: 1rem ;
	display: block ;
	font-family: "Montserrat" ;
	font-size: 2.2em ;
	font-weight: bold ;
	color: #464646 ;
	text-align: center ;
}

div.intro-gallerie
{
	margin-left : 2rem ;
	margin-right : 2rem ;
	margin-bottom: 2rem ;
}

div.gallerie
{
	display: flex ;
	flex-direction: row ;
	flex-wrap : wrap ;
	justify-content: space-between ;
	row-gap : 1.5rem ;
	margin-bottom: 3rem ;
}

div.gallerie>div
{
	width: 50% ;
	text-align: center ;
}

div.gallerie>div>img
{
	width : 80% ;
	height: auto ;
}


@media screen and (max-width: 40em)
{
	div.gallerie>div
	{
		width: 100% ;
	}
}