body {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	font-size:   1.5vw;
	/*width:       100vw;*/
	max-width:   100vw;
	overflow-x:  hidden;
	transition:  .5s ease background-color;
	color: 	rgb(90, 56, 200)
	}

.hidden {
	display: none;
	}

.nav-on {
	overflow: hidden;
	}

.bg-principale {
	/*background: rgb(69,75, 154);*/
	background: rgb(90, 56, 200)
	}

.txt-principale {
	color: rgb(90, 56, 200)
	}

#wrapper a, .fa, .fab{
	/*color: rgb(90, 56, 200)*/
 color: #009863
	}

em {
	font-style: italic;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	body {
		font-size: 18px;
		}
	}

/* TYPO
*********************************************************************************/

.TriviaGroteskN6 {
	font-family: TriviaGroteskN6;
	}

.TriviaGroteskR2 {
	font-family: TriviaGroteskR2;
	}

h1, h2, h3, h4 {
	font-family:    'TriviaGroteskN6', sans-serif;
	
	text-transform: uppercase;
	}

h3.titre {
	font-size: 8vw;
	line-height: 1em;
	}

h4.soustitre {
	font-family: "Roboto Condensed", sans-serif;
	font-weight: bold;
	font-style: italic;
	font-size: 2vw;
	margin-bottom: 2vw;
	}

#content-wrapper p, #wrapper p {
	line-height: 1.3em;
	margin-bottom: .75em;
	}

#content-wrapper ul, #wrapper ul {
	margin: 0 0 0 1em;
	list-style: square;
	/*list-style-position: inside;*/
	margin-bottom: .75em;
	}

#content-wrapper li, #wrapper li {
	/*display: list-item;*/
	line-height: 1.3em;
	}

#content-wrapper .citation, #wrapper .citation {
	font-size: 150%;
	font-weight: bold;
	font-style: italic;
	flex: 0  0 30%;
	align-self: center;
	line-height: 1em;
	/*position: relative;*/
	
	}

#content-wrapper .citation div, #wrapper .citation div  {
	width: 10em;
	/*position: absolute;*/
	margin-left: 5vw;
	line-height: 1em;
	}

.detail-credit {
	font-size: 12px;
	text-align: right;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	h3.titre {
		font-size: 42px;

		}
	
	h4.soustitre {
		font-size: 24px;
		}
	
	#content-wrapper .citation div, #wrapper .citation div  {
		margin-left: 1em;
		font-size: 18px;
		width: auto;
		}
	
	}

/* GENERAL
*********************************************************************************/

/* NAVIGATION
*********************************************************************************/

/* LOGO */

#logo {
	width:           16vw;
	height:          16vw;
	top:             2vw;
	left:            2vw;
	color:           white;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	transition:      border-radius 0.8s cubic-bezier(.09, .92, .51, 1.51), scale 0.8s cubic-bezier(.09, .92, .51, 1.51);
	position:        fixed;
	cursor:          pointer;
	z-index:         5000;
	transform-origin: right center;
	}

#logo .picto {
	
	transition:      transform .8s cubic-bezier(.09, .92, .51, 1.51);
	width:           16vw;
	height:          calc(16vw / 2.96);
	background:      url(/img/logo-top.svg);
	background-size: cover;
	transform-origin: center center;
	}


#logo .text {
	font-size:        2vw;
	transition:       transform 0.5s cubic-bezier(.09, .92, .51, 1.51), opacity .3s ease-in-out;
	height:           calc(10vw / 1.509);
	background:       url(/img/logo-bottom.svg);
	background-size:  cover;
	transform-origin: center center;
	}

#logo.mini {
	border-radius: 100%;
	transform:     scale(0.4);
	}

#logo.mini .picto {
	transform: scale(1.5) translateY(1.5vw);
	}

#logo.mini .text {
	transform: scale(0);
	opacity:   0;
	}

#content-wrapper, #wrapper {
	margin:      2vw 20vw 0 20vw;
	position:    relative;
	width:       60vw;
	min-height:  60vh;
	display: flex;
	flex-wrap: wrap;
	}

.btn-back {
	position: fixed;
	top:16vw;
	left:7vw;
	width: 16vw;
	height: 16vw;
	border-radius: 16vw;
	display: block;
  background-color: rgb(90, 56, 200);
	background-image: url(../img/logo-top.svg);
	background-size: 30vw;
	background-repeat: no-repeat;
	background-position: center 0vw;
	transform: rotateZ(-90deg) scale(0.4);
	text-indent: -9999;
	}

.btn.square {
	  width: 3em;
	height: 3em;
margin-right: .5em;
	background-image: url(../img/logo-top.svg);
	background-repeat: no-repeat;
	background-position: center .6em;
	transform: rotateZ(-180deg) ;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	#logo {
		width:            32vw;
		height:           32vw;
		top:              2vw;
		left:             2vw;
		transform-origin: -1vw 4vw;
		}
	
	#logo .picto {
		width:  32vw;
		height: calc(32vw / 2.96);
		}
	
	#logo .text {
		height: calc(20vw / 1.509);
		}
	
	
	#logo.mini {
		transform: scale(0.25);
		}
	
	#content-wrapper, #wrapper {
		margin:     40vw 10vw 0 10vw;
		position:   relative;
		width:      80vw;
		min-height: 90vh;
		display:    flex;
		flex-wrap:  wrap;
		}
	
	.btn-back {
		transform: rotateZ(-90deg) scale(0.45);
		left:-2.5vw;
		top:39vw
		}
	}

/* LANGUES */
#lang {
	position:       fixed;
	top:            .5vw;
	right:          .5vw;
	text-transform: uppercase;
	font-size:      75%;
	}

#lang a {
	padding-left:    .5em;
	text-decoration: none;
	color:           #666
	}

#lang span {
	padding-left: .5em;
	font-weight:  900;
	}

.active {
	font-weight: bold;
	}

/* MENU */
#btn-menu {
	display:           block;
	position:          fixed;
	width:             4vw;
	height:            4vw;
	right:             0vw;
	top:               4vw;
	transform-origin:  center center;
	z-index:           2000;
	color:             white;
	cursor:            pointer;
	background-color: rgb(90, 56, 200);
	background-image:  url(../img/btn-menu-open.svg);
	background-repeat: no-repeat;
	background-size:   cover;
	}

.nav-on #btn-menu {
	background-image:  url(../img/btn-menu-close.svg);
	background-repeat: no-repeat;
	background-size:   cover;
	}

#menu {
	position:   fixed;
	width:      100vw;
	height:     100vh;
	left:       100vw;
	top:        0;
	transition: .5s left ease-in;
	z-index: 1000;
	}

#menu span {
	display: none;
	}

#menu .gutter {
	height: 80%;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

#menu ul {
	width:           100%;
	height:          80%;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	list-style: none;
	
	}

#menu ul li {
	padding: .5em 0;
	}

#menu a {
	display:         block;
	color:           white;
	text-decoration: none;
	font-size:       5vw;
	text-align:      center;
	text-transform:  uppercase;
	}

.nav-on #menu {
	left:     0vw;
	position: fixed;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	#btn-menu {
		width:  8vw;
		height: 8vw;
		}
	
	#menu a {
		font-size: 24px;
		}
		
	}

/* SOUS NAVIGATION */
#subnav {
	position: fixed;
	left:     2vw;
	top:      20vw;
	width:    10vw;
	}

#content-wrapper #subnav  {
	list-style: none;
	margin: 0;
	}

#subnav li {
	margin:         .5em 0;
	text-transform: uppercase;
	
	}

#subnav li a {
	text-decoration: none;
	}

/* ACCUEIL
*********************************************************************************/
#home-wrapper {
	width:     60vw;
	min-height:     60vw;
	display:   flex;
	flex-wrap: wrap;
	flex-direction: row;
	}

.home-item {
	display: block;
	width:      calc(20vw - 10px);
	height:     calc(20vw - 10px);
	background: silver;
	margin:     0 10px 10px 0;
	transition: transform 0.4s cubic-bezier(.09, .92, .51, 1.51);
	text-decoration: none;
	overflow: hidden;
	}

#home-wrapper .home-group {
	/*border: 1px dotted red;*/
	/*height: fit-content;*/
	/*margin: 0;*/
	/*padding: 0;*/
	/*background: silver;*/
	}

.home-item .gutter {
	padding: 2em;
	}

.home-item:hover {
	transform: scale(1.07);
	z-index: 500;
	text-decoration: none;
	}

.home-item.big {
	width:  calc(40vw - 10px);
	height: calc(40vw - 10px);
	}

.home-item.bandeau {
	width: 60vw;
	height: 20vw;
	}

.home-item.bandeau:hover {
	transform: scale(1);
	}

.home-item.video {
	width: 60vw;
	height: 40vw;
	}

.home-item .front {
	width:      100%;
	height:     100%;
	transition: .5s ease opacity;
	}

.home-item:hover .front {
	width:   100%;
	height:  100%;
	opacity: 0;
	}

.home-item .back {
	color:      white;
	opacity:    0;
	transition: .5s ease opacity;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;;
	}

.home-item:hover .back {
	position: relative;
	width:    100%;
	height:   100%;
	top:      -100%;
	opacity:  1;
	}

.home-item h3 {
	font-size: 2vw;
	}

.home-item h4, h5 {
	font-size: 2vw;
	}

.home-item.big h3 {
	font-size: 3vw;
	}

.home-item.big h4, h5 {
	font-size: 3vw;
	}

.carrousel {
	width:      calc(20vw - 10px);
	height:     calc(20vw - 10px);
	}

.carrousel-item {
	width:      calc(20vw - 10px);
	height:     calc(20vw - 10px);
	}

.carrousel .slide {
	display:         flex;
	width:           100%;
	height:          100%;
	/*height: calc(100vw / 1.777);*/
	text-decoration: none;
	}



.slick-prev:before, .slick-next:before {
	color:black;
	display: none;
	}

.carrousel:hover .slick-prev:before, .carrousel:hover .slick-next:before {
	display: block;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	#home-wrapper {
		width: 80vw;
		height: auto;
		}
	
	.home-item, .home-item.big, .home-item.small, .home-item.video, .home-item.bandeau {
		margin: 1vh 0;
		width:  80vw;
		height: 80vw;
		}
	}

/* CONTENU
*********************************************************************************/
#content-wrapper .visuel, #wrapper .visuel  {
	width:      calc(40vw - 10px);
	height:     calc(40vw - 10px);
	margin: 0 0 10px 0px;
	/*float:right;*/
	position: relative;
	}


.content.titre {
	min-height: 16vw;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

.content.cols {
	
	width: 100%;
	display: flex;
	margin-bottom: 2vh;
	}

.content.two.cols {
	display: block;
	column-count: 2;
	column-fill: balance;
	}



/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	.content.two.cols {
		column-count: 1;
		}
	
	}
/* PROGRAMME
*********************************************************************************/
#programme #filtres {
	width: 100%;
	background: silver;
	margin-bottom: 2vw;
	height: 16vw;
	}

#programme #programme-wrapper {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	}

#programme-wrapper .hour, #programme-wrapper .day, #programme-wrapper .month {
	width:      calc(10vw - 10px);
	height:     calc(10vw - 10px);
	margin:  0 10px 10px 0;
	background: #f0f0f0;
	color:grey;
	text-align: center;
	font-family: 'TriviaGroteskN6', sans-serif;
	font-size: 3vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0vw;
	}

#programme-wrapper .month {
	width: 100%;
	height:     calc(5vw - 10px);
	margin-top: 2vw;
	z-index: 10;
	font-family: 'TriviaGroteskR2', sans-serif;
	}

#programme-wrapper .month.empty, #programme-wrapper .day.empty {
	background: none;
	}

.programme-item {
	width: 100%;
	display: flex;
	text-decoration: none;
	color:black
	}

#programme-wrapper .evenement-item {
	width: 39vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

#programme-wrapper .evenement-item h3{
	font-size: 3vw;
	}

/* PIED DE PAGE
*********************************************************************************/
#footer {
	margin:          6vh 0 4vh 20vw;
	display:         flex;
	justify-content: space-between;
	text-transform:  uppercase;
	font-family:    'TriviaGroteskN6', sans-serif;

	}

#footer > div {
	padding: 2vw 2vw 2vw 10px;
	line-height: 1em;
	width: 20vw;
	}
#footer >div:first-child, #footer >div:last-child {
	/*width: 10vw;*/
	}

#footer p {
	margin: 0;
	}

#footer a{
	color: 	rgb(90, 56, 200)
	}

#footer > div:last-child() {
	text-align: right;
	}

#footer .icon {
	display:    inline-block;
	width:      1.5em;
	height:     1.5em;
	margin:     0 0 0 4px;
	transition: transform 0.4s cubic-bezier(.09, .92, .51, 1.51);
	}

#footer .icon:hover {
	transform: scale(1.3);
	}

#logo-footer {
	height:       3em;
	width:        5em;
	-webkit-mask: url(../img/logo-footer.svg) no-repeat center;
	mask:         url(../img/logo-footer.svg) no-repeat center;
	}

.icon.fb {
	-webkit-mask: url(../img/facebook-square.svg) no-repeat center;
	mask:         url(../img/facebook-square.svg) no-repeat center;
	}

.icon.tw {
	-webkit-mask: url(../img/twitter-square.svg) no-repeat center;
	mask:         url(../img/twitter-square.svg) no-repeat center;
	}

.icon.ig {
	-webkit-mask: url(../img/instagram-square.svg) no-repeat center;
	mask:         url(../img/instagram-square.svg) no-repeat center;
	}

.icon.yt {
	-webkit-mask: url(../img/youtube-square.svg) no-repeat center;
	mask:         url(../img/youtube-square.svg) no-repeat center;
	}

#credits {
	font-size: 11px;
	color:grey;
	padding: 3em 0 3em;
	text-align: center;
	}

#credits a {
	color:grey
	}

#footer input {
	width: 45%;
	float:left;
	margin: 3px;
	}

#footer .button {
	border: 0;
	font-size: 80%;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	#footer {
		width:          80vw;
		margin:         10vh 10vw;
		flex-direction: column;
		}
	
	#footer > div, #footer >div:first-child, #footer >div:last-child {
		font-size: 6vw;
		margin: 1vh 0;
		width: 80vw;
		}
	
	#logo-footer {
		width: 100%
		}
	}

#footer #mc-embedded-subscribe {
	background-color: 	rgb(90, 56, 200);
	width: 2em;
	height: 1.5em;
	background-image: url(../img/logo-top.svg);
	background-repeat: no-repeat;
	background-position: center .3em;
	transform: rotateZ(90deg);
	}

#mc_embed_signup div.mce_inline_error {
	display: none;
	}

/* EQUIPE
*********************************************************************************/

.equipe-item , #wrapper .equipe-item{
	display: flex;
	color: 	rgb(90, 56, 200);
	margin-bottom: 2vw;
	}

.equipe-item:hover {
	text-decoration: none;
	color: 	rgb(90, 56, 200);
	}

.equipe-item .thumb {
	width: 10vw;
	height: 10vw;
	margin: 0 2vw 0 0;
	}

.equipe-item strong {
	display: block;
	text-transform: uppercase;
	margin: 0;
	font-size: 150%;
font-family: TriviaGroteskN6;
	}

.equipe-item .infos {
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	.equipe-item .thumb {
		width: 20vw;
		height: 20vw;
		}
	
	.equipe-item strong {
		font-size: 100%;
		}
	}