body {
	/*background: #71372B;*/

	margin: 0;
	padding: 0;
	background: radial-gradient(ellipse, rgba(207, 150, 143, 0.8) 50%, rgb(207, 150, 143) 100%);
	background-attachment: fixed;
	font-family: 'Playfair Display', serif;
	font-family: 'Niramit', sans-serif;
	color:white;
	font-size: 24px;
	}

h2 {

	font-size: 3vw;
	font-weight: 100;
	font-family: "Monkey Sausage Font";
	color:black;
	text-transform: uppercase;
	}

h2 strong {
	font-weight: 700;
	}

h3 {

	text-transform: uppercase;
	}
 
#panorama {
	height:     80vh;
	/*top:5vh*/
	}

#scroll-down {
	width: 4vw;
	height: 4vw;
	background: url(../img/fleche-bas.png) no-repeat;
	background-position: center center ;
	background-size: contain;
	position:absolute;
	top:90vh;
	left: 48vw;
	animation: pulse 2s infinite;
	}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0); }
	50% {
		-webkit-transform: translate(0, 10px);
		transform: translate(0, 10px); }
	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0); } }

@keyframes pulse {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0); }
	50% {
		-webkit-transform: translate(0, 10px);
		transform: translate(0, 10px); }
	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0); } }

img {
	height: 100%;
	}

#accueil #logo, #accueil_temp #logo {
	position: absolute;
	height: 80vmin;
	width:  80vmin;;
	background:url(../img/logo.png) no-repeat;
	background-position: center center ;
	margin: auto;
	left: calc( 50vw - 40vmin );
	top:-1vw;
	background-size: contain;
	z-index: 1000;
	pointer-events: none;
	}

#logo-small {
	width: 15vw;
	position:fixed;
	top:10px;
	left:10px;
	height: 15vw;
	background:url(../img/logo-small.png) no-repeat;
	background-position: center center ;
	background-size: contain;
	}

.paver--ready div.paver__scroller span {
	background: rgba(113, 55, 43, 0.5);
	}
 

#accueil #content, #accueil_temp #content  {
		padding-top: 20vh;
	}

#content {
	padding: 4vh 0;
	min-height: 90vh;
	}

#content .txt a {
	color:white;
	}

#content .txt a:hover {
  text-decoration: none;
	border-bottom:1px solid rgba(255,255,255,.5)
	}

.item {
	padding-top: 10vh;
	}

/* ACCUEIL
**********************************************************************************************************************/
#a-venir {
	/*background: black;*/
	}

#a-venir h2 {
	color:white;
	margin: 1em 0;
	}

.event-item h2, .event-item h3, .event-item h4{
	margin: 0;
	text-align: left;
	}

.event-item h2 {
	font-family: "Monkey Sausage Font";

	}

.event-item {
	padding: 1em;
	display: block;
	}
#accueil .event-item {
	background: black;
	margin-bottom: 1em;
	}

.event-item .detail {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color:white;
	text-decoration: none;

	}

.event-item:hover {
	text-decoration: none;
	
	}

.event-item .indicator {
	background: url(../img/fleche-droite.png) no-repeat;
  background-size: contain;
	background-position: center center;
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
	
	h2 {
		font-size: 6vw;
		margin: 1em 0;
		}
	.event-item h3, 	.event-item h4 {
		font-size: 4vw;
		}
	
	.event-item h2 {
		  font-size: 8vw;
		margin: .5em 0;
		}
	}

/* CALENDRIER
**********************************************************************************************************************/
#oCalendar {
	width: 100%;
	margin: 0vh 0;
	border-collapse: collapse;
	}

#oCalendar td {
	width: 14.2%;
	height: 3em;
	}

#oCalendar th {
	text-transform: uppercase;
	text-align: center;
	padding: .5em 0 1em;
	font-weight: 900;
	font-family: "Monkey Sausage Font";
	}

#oCalendar td.oDays {
	text-transform: uppercase;
	font-size: 80%;
	text-align: center;
	}

.calendar-day.today {
	border:4px solid white;
	background: rgba(255,255,255,.2);
	}

.calendar-day {
	border:1px solid rgba(255,255,255,.2);
	vertical-align: top;
	padding: .2em;
	}

#oCalendar .busy {
	background: #222;
	color:white
	}

#oCalendar .hours {
	position: relative;
	z-index: 10;
	margin-top: -1.4em;
	}

#oCalendar .hours div{
	min-height: 1.2px;
	/*margin-bottom: .5px;*/
	}
#oCalendar .hours div.busy{
	background: #222;
	
	}
.calendar-month-button {
	width: 2em;
	height: 2em;
	display: block;
	background: url(../img/fleche-bas.png) no-repeat;
	background-size: contain;
	transform-origin: center center;
	transition: .2s all ease;
	}

.calendar-month-button.prev  {
	transform: rotate(90deg);
	float:right
	}

.calendar-month-button.next  {
	transform: rotate(-90deg);
	}


.calendar-month-button.next:hover {
	transform: scale(1.5) rotate(-90deg);
	}

.calendar-month-button.prev:hover {
	transform: scale(1.5) rotate(90deg);
	}


#disponibilites {
	width: 100%;
	}




/* EVENEMENTS
**********************************************************************************************************************/

#evenements h2, #evenements h3 {

	
	}

#evenements h3 {

	font-size: 2vw;
	margin: 0;
	color:black;
	font-weight:900;
	text-transform: uppercase ;
	margin-bottom: 3em;
	}

#evenements h2 {
	font-family: "Monkey Sausage Font";
	font-size: 4vw;
	margin:  .5em 0;
	text-transform: uppercase;
color:black

	}

#evenements h4 {
	margin-bottom: 1em;
	color:black;
	font-weight:900;
	text-transform: uppercase ;
	font-size: 2vw;
	}

#evenements #content a:not(.btn) {
	color:black;
	}

a.partage {
	background: black;
	color:white;
	font-family: "Monkey Sausage Font";
	width: 100%;
	text-align: center;
	display: block;
	font-size: 1.2vw;
	margin: 1em 0;
	}

.evt {
	color:white;
	font-size: 150%;
	}

.evt:hover {
	color:white;
	text-decoration: none;
	}

.thumb.photo {
	width: 12vw;
	height: 12vw;
	margin:1vw
	
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
	#logo-small {
		position: absolute;
		height: 10vh;
		z-index: 1000;
		}
	
	#evenements h3 {
		  margin-top:10vh;
		font-size: 5vw;
		}
	
	#evenements h2 {
		font-size: 10vw;
		}
	
	#evenements h4 {
		font-size: 5vw;
		margin-bottom: 1em;
		}
	
	#evenements #content {
		font-size: 18px;
		}
	
	a.partage {
		font-size: 5vw;
		}
	
	.evt {
		font-size: 80%;
		}
	
	
	.thumb.photo {
		width: 80vw;
		height: 80vw;
		margin:5vw 10vw
		
		}
	}


	
	/* FOOTER
	**********************************************************************************************************************/

#footer {
	padding: 3vw ;
	background: #111;
	font-size: 1.5vw;
	}

#footer #credits {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	}

#footer strong {
	font-family: "Monkey Sausage Font";
	}

#footer a {
	color:white
	}

#footer #credits a {
	color:white;
	font-family: "Helvetica Neue";
	font-size: 1vw;
	text-align: right;
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
	body {
		overflow-x: hidden;
		}
	
	  #logo {
		    top:10vh;
		  }
	
	#panorama {
		height: 70vh;
		overflow-x: scroll;
		overflow-y: hidden;
		overflow-scrolling: touch;
		}
	
	.paver__fallbackMessage {
		display: none;
		}
	
	  #footer #credits a {
		  font-size:  4vw;
		  }
	
	#scroll-down {
		top:75vh;
		width: 10vw;
		height: 10vw;
		}
	
	.img-fluid {
		margin-bottom: 2vh;
		}
	
	#footer {
		font-size: 4vw;
		
		}
	}

#evenements .erreur404 {
	padding: 20vh 0;
	text-align: center;
	}

#evenements .erreur404 h3 {
	font-size: 20vw;
	margin: 1vh auto;
	}