#carrousel-actualites {
	min-height: 5em;
	}


/* TYPO
*************************************************************************************************************/
/*
@font-face {
	font-family:  'AntiqueCondensed';
	src:          url('webfonts/AntiqueCondensed-Two.eot');
	src:          url('webfonts/AntiqueCondensed-Two.eot?#iefix') format('embedded-opentype'),
	              url('webfonts/AntiqueCondensed-Two.woff2') format('woff2'),
	              url('webfonts/AntiqueCondensed-Two.woff') format('woff'),
	              url('webfonts/AntiqueCondensed-Two.ttf') format('truetype');
	font-weight:  500;
	font-style:   normal;
	font-display: swap;
	}
*/
body {
	font-family: 'Roboto Condensed', sans-serif;
	}

body.nav-on {
	height:   100vh;
	overflow: hidden;
	}

h1, h2, h3, h4, h5, h6 {

	text-transform: uppercase;
	margin-bottom:  .2em;
	}

h3 {
	font-size:   180%;
	font-weight: 900;
	}

h4 {
	font-size:   150%;
	font-weight: 700;
	}

h5 {
	font-size: 125%;
	}

.infos h5 {
	font-weight:   900;
	margin-bottom: .5em;
	}

.bg_black {
	background-color: black;
	}

.evt-titre, .titre {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: normal;
	}


.titre {
	font-size: 4vw;
	}

.evt-titre {
	font-size: 4vw;
	margin:    .2em auto;
	}

.evt-credit {
	font-size: 1vw;
	padding:  .3em 1em 0;
	color:grey
}

.evt-soustitre {
	text-transform: none;
	font-size: 3vw;
	display: block;
}

.evt-categories {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	float:       right;
	font-size:   3vw;
	font-weight: normal;
	}


.description {
	font-size:   1.4rem;
	line-height: 1.3em;
	width:       60%;
	margin:      0 0 2em 0;
	}

.description h1 {
	font-size:   3vw;
	font-weight: bold;
	}

.description p {
	margin-bottom: 1em;
	}

.description ul {
	list-style: disc;
	}

.description li {
	margin-bottom:       1em;
	list-style-position: inside;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

	h4 {
		font-size: 120%;
		}

	.infos h5 {
		font-size: 100%;
		margin:    .2em 0;
		}

	.evt-titre, .titre {
		font-size: 8vw;
		margin:    .4em 0;
		}

	.evt-soustitre {
		font-size: 5vw;
	}
	.description h1 {
		font-size: 7vw;
		}
	}

/* HEADER
*************************************************************************************************************/
#header {
	height: 80px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	}

#header #logo {
	width:               50vw;
	margin:              20px 0;
	height:              50px;
	display:             block;
	background:          url(../img/logo-horizontal.svg);
	background-repeat:   no-repeat;
	background-size:     contain;
	background-position: center center;
	z-index:             6000;
	text-indent:         -9999px;
	}

.social {
	width: 10vw;
	font-size: 150%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.social a {
	margin:0 10px;
}

.social a:hover {
	color:black
}

#btn-menu {
	position: absolute;
	right:    0;
	top:      20px;
	z-index:  8000;
	}

#btn-menu:before {
	font:         normal normal normal 14px/1 FontAwesome;
	content:      '\f0c9';
	margin-right: .5em;
	width:        1em;
	display:      inline-block;
	}

.nav-on #btn-menu:before {
	content: '\f00d';
	width:   1em;
	display: inline-block;
	}

nav .active {
	font-weight: 900;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

	#btn-menu:before {
		margin: 0;
		width: auto;
	}

	#btn-menu span {
		display: none;
	}

	.social {
		font-size: 90%;
		width: 18vw;
	}

	.social a {
		margin: 0 5px;
	}
}



/* MENU
*************************************************************************************************************/
nav {
	position:    fixed;
	top:         0;
	left:        0;
	width:       100vw;
	height:      100vh;
	z-index:     5000;
	display:     none;
	padding-top: 88px;
	}

.nav-on nav {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	font-size:       2vh;
	}

nav .section {
	background: rgba(0, 0, 0, .3);
	width:      90vw;
	margin:     1vh 0;
	padding:    1em 2em;
	display:    flex;
	/*flex-direction: column;*/
	/*justify-content: space-between;*/
	}

nav .section.left {
	left:                       0;
	border-top-right-radius:    25px;
	border-bottom-right-radius: 25px;
	padding-left:               20vw;
	}

nav .section.right {
	margin-left:               10vw;
	border-top-left-radius:    25px;
	border-bottom-left-radius: 25px;
	padding-left:              10vw;
	padding-right:             12vw;
	}

nav .section .column {
	display:         flex;
	flex-direction:  row;
	justify-content: space-between;
	flex:            0 0 45%;
	}

nav .section .column.large {
	flex: 0 0 100%;
	}


nav h4 {
	display:   block;
	flex:      0 0 30%;
	font-size: 1.5vw;
	color:     rgba(255, 255, 255, .5);
	margin:    0;
	}


nav .section div.items {
	display:        flex;
	flex-direction: column;
	flex:           0 0 65%
	}

nav .section .column.large h4 {
	flex:      0 0 15%;
	}

nav .section .column.large div.items {
	flex:    0 0 100%;
	padding: 0 0 0 1em;

	}


nav a {
	font-size:        2.2vh;
	color:            white;
	text-transform:   uppercase;
	margin:           0 0 1em;
	transform-origin: center center;
	transition:       .2s ease-in-out transform;

	}

nav a:hover {
	color:           white;
	text-decoration: none;

	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

	nav {
		padding: 0;


		}

	.nav-on nav {
		display:         flex;

		flex-direction:  column;
		justify-content: center;
		}

	nav a {
		margin: 0 0 .5em 0;
		}

	nav a {
		font-size: 2.1vh;
		}

	nav h4 {
		font-size: 1.8vh;
		}

	nav .section .column.large h4 {
		flex: 0;
		}

	nav .section {
		padding:        .2em;
		flex-direction: column;
		margin:         .5vh;
		}

	nav .section .column {
		flex:           0 1 100%;
		justify-self:   flex-start;
		flex-direction: column;
		}

	nav .section.right {
		flex-direction: row;
		}

	nav .section.right .column {
		flex: 0 1 50%;
		}

	nav h4 {
		flex:   0 1 100%;

		margin: 0 0 .5em 0;
		}


	}

/* UI
*************************************************************************************************************/
.button {
	padding:     10px 10px;
	color:       white;
	cursor:      pointer;
	font-weight: 900;
	transition:  .1s transform ease;
	}

div.button.in_content {
	display:       inline-block;
	color:         white;
	border-radius: 10px;
	margin-right:  10px;
	}


.button i {
	color: white
	}

.button:hover {
	color:           white;
	text-decoration: none;
	transform:       scale(1.1);
	}

.button.ui {
	background: black;
	}

.button.action {
	background: #003cb3;
	}

.button-wrapper {
	width:   100vw;
	/* margin: 5vh auto;*/
	display: flex;
	}

.button-wrapper.fluid, .button-wrapper.fluid .button {
	width:  100%;
	margin: 0 0 5px 0;
	}


.button-wrapper.right {
	justify-content: flex-end;
	}

.left-rounded {
	border-bottom-left-radius: 15px;
	border-top-left-radius:    15px;
	}

.right-rounded {
	border-bottom-right-radius: 15px;
	border-top-right-radius:    15px;
	}

.top-rounded {
	border-top-left-radius:  15px;
	border-top-right-radius: 15px;
	}


.button a, .button a:hover {
	color:           white;
	text-decoration: none;

	}

.title-wrapper {
	width:  100vw;
	margin: vh 0 5vh;
	}

#accueil .title-wrapper {
	margin-top: 10vh;
	}

#splashvideo{
	height: 90%;

}

.title-gutter {
	width: 80vw;
	}

.title-gutter.left {
	margin-left: 20vw;
	}

.title-gutter.right {
	margin-left: 0vw;
	}

.title-gutter h3 {
	width:          60vw;
	font-size:      2.8vw;
	text-transform: uppercase;
	padding:        .5em;
	}

.title-gutter.small h3 {
	font-size: 1.5vw;
	}

.title-gutter.left h3 {
	margin-right: 20vw;
	text-align:   center;
	}

.title-gutter.right h3 {
	margin-left: 20vw;
	text-align:  center;
	}

.block-wrapper {
	width:  100vw;
	margin: 0vh 0 2vh;
	}

.block-wrapper.fluid {
	width:  100%;
	margin: 0;
	}

.block-gutter {
	width:   80vw;
	padding: .5em 1em;
	}

.block-gutter.fluid {
	width:   100%;
	padding: 1em;
	margin:  0;
	}


.block-gutter.left:not(.fluid) {
	margin-left: 20vw;
	}

.block-gutter.right {
	margin-left: 0vw;
	}

.hover {
	transition: .5s background-color ease-in-out;
	}

#filter {
	display:         flex;
	justify-content: space-between;
	padding:         0;
	font-weight:     bold;
	}

#filter .button-wrapper {
	width:   auto;
	padding: 0;
	}

#filter .button {
	border-radius: 15px;
	}

#filter select {
	/* styling */
	background-color:    black;
	border:              none;
	border-radius:       15px;
	display:             inline-block;
	font:                inherit;
	font-weight:         bold;
	line-height:         1.5em;
	padding:             0.5em 3.5em 0.5em 1em;
	color:               white;

	margin:              0;
	-webkit-box-sizing:  border-box;
	-moz-box-sizing:     border-box;
	box-sizing:          border-box;
	-webkit-appearance:  none;
	-moz-appearance:     none;

	background-image:    linear-gradient(45deg, transparent 50%, white 50%),
	                     linear-gradient(135deg, white 50%, transparent 50%);

	background-position: calc(100% - 20px) calc(1em + 2px),
	                     calc(100% - 15px) calc(1em + 2px),
	                     calc(100% - 2.5em) 0.5em;
	background-size:     5px 5px,
	                     5px 5px,
	                     1px 1.5em;
	background-repeat:   no-repeat;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

	.title-gutter h3 {
		font-size: 4vw;
		}

	.title-gutter.small h3 {
		font-size: 4vw;
		}
	}

/* ACCUEIL
*************************************************************************************************************/
#carrousel-wrapper {
	padding-top: 2vh;
}
#carrousel-evenements {
	width:        90vw;
	/*height: 60vh;*/
	aspect-ratio: 16/7;
	margin:       0 5vw;
	}

#carrousel-evenements .slick-slide {

	margin: 0 5vw;
	}

#carrousel-evenements .evenement-item > div {
	width:          100%;
	aspect-ratio:   16/9;
	display:        flex;
	flex-direction: column;
	}

#carrousel-evenements .evenement-item {
	color:           black;
	text-decoration: none;
	}

#accueil .title-wrapper {
	margin: 10vh 0 5vh 0;
	}

.evenement-item .visuel, #programme.detail .visuel,#agenda.detail .visuel , #page .visuel {
	overflow:        hidden;
	display:         flex;
	justify-content: space-between;
	}

.visuel .image {
	width: 100%;
}

.evt-categorie {
	border-top-right-radius:    10px;
	border-bottom-right-radius: 10px;
	padding:                    .2em 1em;
	align-self:                 flex-start;
	justify-self:               flex-start;
	font-family: 'Yanone Kaffeesatz', sans-serif;

	font-size:                  250%;
	color:                      white;
	margin-top:                 4px;
	}


.evenement-item .evt-dates, #programme.detail .evt-dates, #agenda.detail .evt-dates {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	font-weight:     bold;
	text-transform:  uppercase;
	}

.evenement-item .evt-date, #programme.detail .evt-date, #agenda.detail .evt-date {
	border-top-left-radius:    10px;
	border-bottom-left-radius: 10px;
	padding:                   .5em 1em;
	align-self:                flex-end;
	justify-self:              flex-start;
	margin-bottom:             4px;
	font-size:                 150%;
	color:                     white
	}


.evenement-item .visuel {
	flex:          0 0 90%;
	border-radius: 25px;
	}

.evenement-item .info {
	flex:       0 0 10%;
	text-align: center;
	}

#btn-evt-prev {
	display:  inline-block;
	position: absolute;
	top:      calc(45vw / 1.7);
	left:     0px;

	}

#btn-evt-next {
	position: absolute;
	top:      calc(45vw / 1.7);
	right:    0
	}


#accueil #btn-newsletter {
	right: 1vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	border-radius: 100%;
	padding: 1em;
	position: absolute;
	color:white;
	width: 8vw;
	height: 8vw;
	margin-top: -10vh;
	font-size: 1.2vw;
	transform: rotateZ(-10deg);
	transition: .5s transform ease-in-out;
}

#accueil #btn-newsletter:hover {
	text-decoration: none;
	transform: scale(1.1);
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

	.evt-categorie {
		font-size: 24px;
		width:     fit-content;
		}

	.evenement-item .evt-date {
		font-size: 12px;
		width:     fit-content;
		}

	#btn-evt-next, #btn-evt-prev {
		top: calc(45vw / 1.0);
		}
	}


#carrousel-actualites {
	width:  90vw;
	margin: 5vh 5vw;
	}

#carrousel-actualites .slick-slide {
	margin: 0 5vw;
	}

.actualite-item {
	border-radius: 15px;
	width:         100%;
	padding:       1em;
	height:        100%;
	color:         white;
	text-align:    center;
	line-height:   1.2em;


	}

.actualite-item .gutter {
	display:         flex;
	flex-direction:  row;
	justify-content: space-between;
	}

.actualite-item .gutter div {
	flex: 0 0 10%
	}

.actualite-item .gutter .texte {
	flex: 0 0 80%
	}

.actualite-item .gutter .btn {
	align-self: center;
	}

.actualite-item .gutter .action {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

.actualite-item a {
	color:         white;
	border-radius: 15px;
	}

#btn-act-prev {
	position: absolute;
	top:      calc(110vw / 1.85);
	left:     0
	}

#btn-act-next {
	position: absolute;
	top:      calc(110vw / 1.85);
	right:    0
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

	.actualite-item .gutter {
		flex-direction: column;
		}

	.actualite-item a {
		margin-top: 10px;
		}

	}

#accueil .content {
	/*width: 90vw;*/
	}

.content.left {
	margin: 0 0 0 10vw;
	}

.content.right {
	padding: 0 0 0 10vw;

	}

.sponsors {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	padding:         2vw;
	width: 80vw;
  margin: 0 auto;

	}

.sponsors-wrapper {
	display: flex;
	flex: 0 0 100%;
	}

.sponsor-description {
	flex: 0 0 70%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

.sponsor {
	display:           flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	flex:              0 0 17%;
	margin:            0 auto 1em;
	height:            10vh;
	background-repeat: no-repeat;

	}

.sponsor img {
	width: 100%;
	}

#btn-scroll {
	position:   fixed;
	bottom:     0;
	left:       calc(50vw - 1em);
	transition: display .5s ease;
	}

#btn-scroll.hide {
	display: none;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

	.content.left, .content.right {
		margin:  0 5vw 0;
		padding: 0;
		}

	#btn-evt-next, #btn-evt-prev {
		top: calc(30vw + 80px)
		}

	#btn-act-next, #btn-act-prev {
		opacity: 0;
		}
	
	.sponsors {
		width: 90vw;
		}

.sponsor {
		flex: 1 1 40%;
	align-self: center;
	

		}
	
	.sponsor-description {
		flex: 0 0 80%;
		}
	#accueil .actualite-item {
		font-size: 12px;
	}

	}

/* FORMULAIRES
*************************************************************************************************************/
.loginForm, #login-form {
	text-align:    center;
	padding:       2em;
	width:         50vw;
	margin:        0vh auto 10vh;
	color:         white;
	border-radius: 25px;
	}

.loginForm .error {
	margin: 0 0 .5em;
	}

.loginForm input {
	width: 60%;
	margin: 1em 20%;
	padding: .5em;
	}

.loginForm .button, #login-form  button {
	border:        0;
	margin-top:    1em;
	border-radius: 10px;
	}

#esp-form {
	display:   flex;
	width:     70vw;
	max-width: 1200px;
	margin:    0vw auto;
	flex-wrap: wrap;

	}

#esp-form h3 {
	width:      100%;
	margin-top: 1em;
	}

#esp-form label {
	font-weight:    bold;
	display:        block;

	margin:         1em 0 .5em;
	text-transform: uppercase;
	}

#esp-form input {

	}

#esp-form input.radio {
	width:   1em;
	display: inline-block;
	}

.error-message {
	margin-top:  2em;
	font-weight: bold;
	}

#esp-form .field {
	padding: .2em;

	}

#esp-form .field.full {
	flex: 1 1 100%;
	}

#esp-form .field.half {
	flex: 1 1 50%;
	}

#esp-form .field.third {
	flex: 1 1 33%;
	}

#esp-form .field.two-third {
	flex: 1 1 66%;
	}

#esp-form .field.quarter {
	flex: 1 1 25%;
	}

#esp-form .field.three-quarters {
	flex: 1 1 75%;

	}

.form-control[readonly] {
	background-color: white;
	opacity:          1;
	}

#esp-form .input-group-addon {
	display: none;
	}

.more_dates {

	width:     100%;
	display:   flex;
	flex-wrap: wrap;

	}

#btn-more-date {
	background-color: silver;
	color:            grey;
	padding:          .5em 2em;
	border-radius:    4px;
	display:          block;
	width:            fit-content;
	cursor:           pointer;
	margin-bottom:    1em;
	}

#esp-form .error {
	display: none;
	}

#esp-form .help_text {
	font-weight:    300;
	font-size:      90%;
	margin:         .5em 0 0 0;
	color:          grey;
	text-transform: none;
	}

#esp-form .counter {
	/*margin-top:  1em;*/
	font-weight: 900;
	}

#esp-form textarea {
	width:  100%;
	height: 5em;
	}

.part-error {
	display: none;
	}

.button.save {
	border-radius: 20px;
	border:        0
	}

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

.liste .evenement-item, .liste .item {
	display:         flex;
	justify-content: space-between;
	margin:          0 0 2vh 0;
	color:           #444;
	padding:         .5em .2em;
	border-bottom:   1px dotted transparent;

	}

.liste .item {
	display: block;
	}

.liste .evenement-item:hover {
	text-decoration: none;
	}

.liste .evenement-item .visuel {
	flex:          0 0 25%;
	aspect-ratio:  16/9;
	border-radius: 10px;
	align-self:    flex-start;
	}

.liste .evenement-item .texte {
	flex:            0 0 60%;
	border-radius:   10px;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

.liste .evenement-item .action {
	flex: 0 0 10%;
	}


.detail .visuel {
	width:                      80vw;

	border-bottom-right-radius: 25px;
	border-top-right-radius:    25px;
	}


.detail .visuel.no_image {
	aspect-ratio: unset;
}

.detail .visuel.no_image .evt-categorie {
text-align: right;
}

.detail .visuel.image {
	aspect-ratio:               16/7;
}

.detail .content {
	display:         flex;
	justify-content: space-between;
	margin:          6em 0;
	}

.detail .content .description {
	flex: 0 0 60%
	}

.detail .content .distribution {
	font-size:  80%;
	margin-top: 1em;
	color:      #666
	}

.detail .content .infos {
	flex: 0 0 35%;
	}

.detail .content .video-frame {
	height:        40vh;
	margin-bottom: 1em;
	}

.detail .content video {
	width: 100%;
	margin-bottom: 1em;
}

.detail .content.liste {
	flex-direction: column;
	}

.detail .sponsor {
	display:             block;
	width:               100%;
	height:              10vh;
	margin:              1em auto 0em;
	max-height:          10vh;
	background-repeat:   no-repeat;
	background-position: center center;
	}


#btn-saison-prev {
	display:  inline-block;
	position: absolute;
	top:      140px;
	left:     0px;
	}

#btn-saison-next {
	position: absolute;
	top:      140px;
	right:    0
	}

.statut {
	background:  black;
	color:       white;
	font-size:   70%;
	font-weight: 700;
	padding:     .2em 1em;
	}

.statut.problem {
	transform-origin: center;
	transform:        rotateZ(-10deg);
	display:          block;
	position:         absolute;
	margin:           -1.8em 0 0 1em;

	}

#accueil .statut {
	font-size:  50%;
	margin-top: -2em;
	}

.sep {
	height:        2px;
	width:         100%;
	margin-bottom: 10px;
	flex:          0 0 100%
	}

.sep_ressources {
    height:        2px;
	margin: 20px 0;
}



.pastille {
	position:        absolute;
	border-radius:   100%;
	width:           6vw;
	height:          6vw;
	text-align:      center;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	color:           white;
	margin:          -1vw 0 0 -2vw;
	font-weight:     bold;
	transform:       rotateZ(-25deg);
	font-size:       1.1vw;

	}

#programme.detail .pastille, #agenda.detail .pastille {
	left: 79vw
	}


/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {


	.liste .evenement-item {
		flex-wrap: wrap;
		}

	.liste .evenement-item .texte,
	.liste .evenement-item .visuel {
		flex: 0 0 100%
		}

	.liste .evenement-item .action {
		flex:       0 0 100%;
		margin-top: 10px;
		}

	.liste .evenement-item .action .left-rounded, .liste .evenement-item .action .right-rounded {
		border-radius: 15px;
		text-align:    center;

		}

	.pastille {
		width:     15vw;
		height:    15vw;
		font-size: 3vw;
		}

	#btn-download {
		display: none;
		}

	#programme.detail .visuel {
		width:        90vw;
		aspect-ratio: 16/9;
		}

	#programme.detail .evt-date {
		font-size: 16px;
		}

	#programme.detail .content {
		flex-direction: column;
		margin-top:     5vh;
		}

	#programme.detail .infos {
		order:  0;
		flex:   0 0 100%;
		width:  90vw;
		margin: 0 0 0 10vw;
		}

	#programme.detail .description {
		order:  1;
		flex:   0 0 100%;
		width:  90vw;
		margin: 5vh 5vw;
		}

	.detail .content {
		margin: 3em 0 0 0;
		}

	.detail .content .description {
		flex:   0 0 90%;
		margin: 0 5%;

		}

.partenaires 	.detail .content .description {
		flex:   0 0 100%;
		margin: 0 ;

		}

	.subnav {
		display: none;
		}

	}

/* AGENDA
*************************************************************************************************************/
.agenda-item {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: space-between;
	margin:          0;
	padding:         0;
	}

.mois {
	margin-top: 4em;
	}

.agenda-item .date {
	flex: 0 0 20%;
	}

.agenda-item .date h3 {
	margin-top:  0;
	font-size:   3vw;
	font-weight: 900;
	}

.agenda-item .evenement-item {
	flex:         0 0 75%;
	padding-left: 0;
	}


.agenda-item .action {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

 #programme .mois {
	background: rgba(255, 255, 255, 1);
	position:   sticky;
	top:        0vw;
	-webkit-backdrop-filter: blur(5px);
	}

.agenda-item .evenement-item .pastille {
	position: absolute;
right: auto;
	margin-left: -7vw;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

	.mois {
		margin-top: 2em;
		}

	.agenda-item .date, .agenda-item .evenement-item {
		flex: 0 0 100%
		}

	.agenda-item .date h3 {
		font-size: 6vw;
		}





	}

/* PIED DE PAGE
*************************************************************************************************************/
#footer {
	width:           100vw;
	padding:         2vh 10vw 0;
	display:         flex;
	flex-wrap:       wrap;
	color:           white;
	justify-content: space-between;
	margin-top:      10vh;
	line-height:     1.4em;
	}

#footer .logo {
	flex:                0 0 100%;
	height:              10vh;
	height:              10vh;
	background:          url(../img/logo-vertical.svg);
	background-position: left center;
	background-size:     contain;
	background-repeat:   no-repeat;

	}

#footer a {
	color: white
	}

#footer div {
	margin-bottom: 5vh;
	}

#footer div.third {
	flex: 0 1 31%
	}

#footer .credit {
	flex:       0 0 100%;
	font-size:  60%;
	color:      rgba(255, 255, 255, .8);
	text-align: right;
	}

#footer .credit a {
	color: rgba(255, 255, 255, .8);
	}

#map {
	width:        100%;
	aspect-ratio: 1;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	#footer div.third {
		flex: 0 0 100%
		}

	#footer .map {
		order: 4;
		}

	#footer .credit {
		order: 100;
		}
	}


#acces_partenaires {
	padding-right: 10vw;
	}

#partenaires .detail .content {
	margin-top: 0;
}

#acces_partenaires  td  {

	}

#acces_partenaires td li {
	margin-bottom: 6px;
	}

#acces_partenaires #fldtexte, #acces_partenaires #fldtexte_web {
	height: 15em;
}

#partenaires_apercu h3 {
	text-transform: none;
}

.message.partenaires {
	/*background: #f0f0f0;*/
	width: 50vw;
	margin: 0 auto 10px;
	padding: 1em;
	border-radius: 5px;
}

.message.partenaires {
	color:white
}

#partenaires  ul {
	list-style: disc;
}

#partenaires .main-col {
	width: 60%;;
	padding-right: 1em;
}

#partenaires .detail-col {
	width: 35%;;
	/*display: flex;*/
	/*align-content: flex-start;*/
	/*flex-wrap: wrap;*/
}

.add-distribution {
	margin-top: 1em;
}

#esp-form .field.full {
	flex:1 1 100%;
}

#esp-form .field.half {
	flex:1 1 50%;
}

#esp-form .field.third {
	flex:1 1 33%;
}

#esp-form .field.two-third {
	flex:1 1 66%;
}

#esp-form .field.quarter {
	flex:1 1 25%;
}

#esp-form .field.three-quarters {
	flex:1 1 75%;
}

#acces_partenaires .field.radio .radio{
	float: left;
	margin-left: 10px;
}

.row.event {
	padding:.2em 0;
	margin:0;
}

.row.event input[type=text] {
	font-size: 16px;
	width: 100%
}

.row.event  .col-lg-3,.row.event  .col-md-3{
	flex: 1 1 25%;
	max-width: none;
}

.add-event-date {
	margin:10px  26px ;
}

/* GALERIES
*********************************************************************************/
#galerie {
	display:   flex;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
	width:     100%;
	margin:    10vh auto;
}

#galerie img {
	margin: 10px 10px 0 0;
	width:  100%;
}

#galerie a {
	margin:           10px 10px 0 0;
	width:            15vw;
	height:           15vw;
	overflow:         hidden;
	display:          flex;
	flex-direction:   column;
	justify-content:  flex-start;
	transform-origin: center center;
	transition:       .2s all ease;
	border-radius: 4px;
	padding: 2px;
}

#galerie a img {
	width: 100%;
}

.sl-wrapper .sl-close {
	color:white
}

#galerie a:hover {
	transform: scale(1.1);
	z-index:   10;
}

.sl-overlay {
	-webkit-backdrop-filter: blur(40px);
	backdrop-filter:         blur(20px);
	z-index: 10000;
}

.sl-wrapper {
	z-index: 10001;
}

.sl-wrapper .sl-image {
	z-index: 10002;
}

.sl-wrapper .sl-image .sl-caption {
	background:  transparent;
	font-family: "Roboto Condensed", sans-serif;
	font-size:   150%;
	text-shadow: 0 0px 20px black;
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

	#galerie a {
		margin: 10px 10px 0 0;
		width:  40vw;
		height: 30vw;
	}

	#galerie a img {
		height: 30vw;
	}

	.sl-wrapper .sl-image .sl-caption {
		font-size: 90%;
	}

}


.erreur-404 {
	font-weight: 900;
	text-align: center;
	padding: 25vh 0 ;
}