/**
 * La Nuit de l'Info (c) C.line
 * Celine AUZIAS 2015
 * c DOT line AT ymail DOT com */
*, *::after, *::before {
	box-sizing:border-box;
	-o-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
body{
	background-color:#051923;
	font-family: 'Barlow', 'Raleway', Trebuchet, Arial, sans-serif;
	font-size:1.1em;
	font-weight:400;
	color:#eee;
	padding-top:0;
	margin:0;
}
.autocenter { margin:auto; }
.max1280 { width:100%; max-width:1280px; }
.max1024 { width:100%; max-width:1024px; }
.max960  { width:auto; max-width:960px; overflow:auto; padding:0 1em; }
.max768  { width:auto; max-width: 768px; margin:0 auto; padding:0 1em; }
.max644  { width:auto; max-width: 644px; margin:0 auto; padding:0 1em; }
.pullRight { float:right; }
.pullLeft { float:left; }
.aleft { text-align:left; }
.centrer { text-align: center; }
.uppercase { text-transform:uppercase; }
.lowercase { text-transform:none; }
.spaced { margin:1.5em;}
.vcenter { vertical-align:middle;}
@media screen and (max-width: 700px) { .spaced { margin:1em auto;} }
.hidden { display:none; }
.visible { display:block; }
.mini { font-size:0.7em; font-style:italic; }
.clear { clear:both; margin:0; padding:0;height:auto;}
.bleu{ color:#22b8c7; }
.jaune{ color:#ECC427;}
.warning { font-weight:bold; text-align:center; padding-left:35px;background:#ECC427 url("../img/style/warning-2.png") no-repeat 15px center;background-size:auto 30px;display:inline-block; line-height:30px;padding:1.5rem; text-indent: 2rem; color:#051923;border-radius: 50px;}
.infomsg{ background:#4db8c7 url("../img/style/warning-2.png") no-repeat 15px center;background-size:auto 30px;display:inline-block; text-align:left; padding:1.5rem 1.5rem 1.5rem 4rem;; border-radius: 40px; text-indent: 0;line-height: 1.5rem;font-weight: 400;color:#051923;}
em { font-style:normal; }
u { text-decoration:none; border-bottom:1px dotted #22b8c7; color:#ECC427;}
p{
	margin:0.5em auto 0 auto;
	line-height:1.5em;
	text-align:justify;
	font-size:1.1rem;
	/*max-width:644px;*/
	/*padding:0 1em;*/
}
p.pbig { font-size: 1.2rem; color:#4db8c7;}
ul{
	padding-left:0.7em;
}
ul li{
	padding-bottom: 1em;
	text-align:justify;
	line-height:1.5em;
}
.table { display: table; width:100%; }
.tr { display:table-row; }
.td { display: table-cell; vertical-align: middle; }
h1 {
	color:#fff;
	font-size:3.2em;
	line-height:0.85em;
	margin:0.1em 0;
	display:inline-block;	
	text-transform:uppercase;
	font-weight:300;
}

h2{
	color:#ECC427;
	font-size:1.9em;
	margin:0.1em 0.2em;
	font-weight:normal;
}
h3, .nuitspassees h3{
	color:#ECC427;
	font-size:1.9em;
	margin:1.5em 0 0.8em 0;
	font-weight:400;
	text-transform:uppercase;
	font-family: 'Raleway', Trebuchet, Arial, sans-serif;
}
h4, h5{
	font-size:1.4em;
	margin-bottom:0.2em;
	margin-top:0.5em;
	font-weight:bold;
	color:#22b8c7;
}
.page.lanuit h4 { font-weight:400; }
hr {
	border:0;
	border-bottom:1px solid #3b4951;
	margin-bottom:1.5em;
}
.denied {
	background:rgba(0,0,0,0.8) url("../img/style/denied.png") repeat left top;
	color:#fff;
	display:none;
	position:absolute;
	left:0; top:0;
	width:100%; height:100%;	
}
.dflex { display: flex; justify-content: center; align-items: center; }
.dflex.reverse { flex-direction: row-reverse; }
.dflex-text { width: 52%; }
.dflex-media { width: 48%; }
.dflex.large .dflex-text { width: 65%; }
.dflex.large .dflex-media { width: 35%; }
.dflex-text { text-align: left; padding:1rem 1.5rem; }
.dflex-30 { flex-wrap: wrap; align-items: start;}
.dflex-30 > * { width: 32%; padding:0 1.5rem; margin:2rem 0;}
@media screen and (max-width: 840px) { 
	.dflex { flex-direction: column; } 
	.dflex.reverse { flex-direction: column; } 
	.dflex-text, .dflex-media, .dflex.large .dflex-text, .dflex.large .dflex-media { width: 100%; } 
	.dflex-text { padding:1rem 2rem; }
	.dflex-media img { max-height: 200px; }
	.dflex-text ul { padding-left: 0; }
	.dflex.dflex-30  { flex-direction: row; }
	.dflex.dflex-30 > * { width: 50%; }
}
@media screen and (max-width: 480px) { 
	.dflex.dflex-30  { flex-direction: column; }
	.dflex.dflex-30 > * { width: 100%; }
}


a, a:link, a:visited, a:active { color:#ECC427; }      
a:hover{ color:#feff90; }
a img { border:0; }
a.bouton, a.bouton:link, a.bouton:visited {
	display:inline-block;
	background-color:rgba(5,25,35,0.75);
	color:#ECC427;
	border:2px solid transparent;
	font-weight:bold;
	padding:1em;
	margin-top:1em;
	text-decoration:none;
	border-radius: 50px;
	
	transition: all 0.1s;
	-o-transition: all 0.1s;
	-moz-transition: all 0.1s;
	-webkit-transition: all 0.1s;		
}
a.bouton:hover, a.bouton:focus, a.bouton:active{
	border:2px solid #ECC427;
	border-radius: 10px;
}
a.bouton.btnLink, a.bouton.btnLink:link, a.bouton.btnLink:visited {
	background-color: #ECC427;
    padding: 0.5rem;
    color: rgba(5,25,35,0.75);
}
a.bouton.btnLink:hover, a.bouton.btnLink:focus, a.bouton.btnLink:active{
	border:2px solid rgba(5,25,35,0.5);
}
a.jaune, a.jaune:link, a.jaune:visited { color:#ECC427;}
.home a, .home a:link, .home a:visited { color:#22b8c7; }
.home a.bouton, .home a.bouton:link, .home a.bouton:visited { border:2px solid #ECC427; margin:1rem 0.5rem 0 0.5rem;}
.home a img, .home a:link img { vertical-align: middle; }
.warning a, .warning a:link, .warning a:visited { color:#4db8c7; }
.lanuit a.scrollTo:not(.bouton) { text-decoration:none; border-bottom:2px dotted #22b8c7; color:#ECC427;}
/* ---------------- Modale ---------------- */
.modale { 
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	padding:1rem;
	z-index:999;
	display:none;
	font-size:0.87rem;
}
.modale .close { position: absolute; width: 50px; height: 50px; font-size: 50px; display: inline-block; right: 1.2rem; line-height: 50px; top: 1.2rem; font-weight: bold; text-decoration:none; }
@media (max-width:780px){ .modale .close { width: 40px; height: 40px; font-size: 40px; line-height: 40px; } }
.modale .content {
	text-align:center;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.85);
}
/* ---------------- Countdown ---------------- */
.counter {
	position:fixed;
	top: 0;
	left: 0;
	z-index:4;
	text-align:center;
	width:100%;
	min-height:48px;
	padding:.7rem;
	background-color:#22b8c7;
	transition: all 1s; 
	-o-transition: all 1s;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;	
	cursor:pointer;
}
/*.counter.fixed { background-color:#22b8c7;}*/
.counter .zoom { width:28px; height:24px; margin-right:1em; display:inline-block; opacity:0.6; }
.counter .zoom:hover { opacity:1; }
@keyframes zoom {
    0% {width:24px; height:auto;}
    5% {width:28px; height:auto;}
    10% {width:24px; height:auto;}
    100% {width:24px; height:auto;}
}
.counter .zoom img {
	width:24px; height:20px; 
	animation: zoom 2s ease-in 0s infinite alternate;
	-webkit-animation: zoom 2s ease-in 0s infinite alternate;	
}
.countdown, .countdownNight{ display:none; width:250px; }
#modale-content .countdown, #modale-content .countdownNight{
	font-size:1.5em;
	width:auto;
	display:block;
}
.countdown .year, .countdownNight .year{ display:block; }
.countdown div, .countdownNight div{
	font-family: 'Cabin Sketch','Raleway', Trebuchet, Arial, sans-serif;
	display:inline-block;
	margin-right:0;
	text-align:center;
	color:#ECC427;
}
.countdown div div, .countdownNight div div{ font-size:1.35em; }
#modale-content .countdown div div, #modale-content .countdownNight div div{ font-size:3.8em; }
.countdown div.secondes div, .countdownNight div.secondes div{ font-size:1em; }
#modale-content .countdown div.secondes div, #modale-content .countdownNight div.secondes div{ font-size:3em; }
.countdown div .small, .countdownNight div .small{ color:#22b8c7; font-size:1.1em; }
.counter.fixed .countdown div div, .counter.fixed .countdownNight div div{ color:#051923; }
.counter.fixed .countdown div .small, .counter.fixed .countdownNight div .small{ color:#ECC427; }
#modale-content .countdown div .small, #modale-content .countdownNight div .small{
	font-size:2em;
	font-family: 'Raleway', Trebuchet, Arial, sans-serif;
	font-weight:bold;
}
@media (max-width:560px){	
	#modale-content .countdown div div, #modale-content .countdownNight div div{ font-size:2em; }
	#modale-content .countdown div.secondes div, #modale-content .countdownNight div.secondes div{ font-size:1.8em; }	
	#modale-content .countdown div .small, #modale-content .countdownNight div .small{ font-size:1.5em; }	
}
/* ---------------- Nav ---------------- */
.nav {
	position:fixed;
	top:48px;
	left:0;	
	width:100%;
	background-color:rgba(5,25,35,0.65);
	text-align:right;
	height:auto;
	z-index:3;
	margin-top:0;

	transition: all 1s;
	-o-transition: all 1s;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;	
}
.nav a{
	position:relative;
	font-weight:bold;
	text-decoration: none;
	text-transform: uppercase;
	font-size:1rem;
	padding:0 1em;
	line-height:3em;
	display:inline-block;
	vertical-align:top;
	color:#22b8c7;
	transition: all 1s;
	-o-transition: all 1s;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;		
}
.nav a.active {color:#ECC427;}

.nav .logo { margin:5px; }
.nav a.pullLeft { height:41px;}
.nav-links { display:inline-block;}
.nav a.aburger { display:none;}
.burger {
	display:inline-block;
	width:35px;
	height:35px;
	margin:0.3em 0.5em 0 0.5em;
	border:2px solid #eee;
	border-radius:18px;
	-moz-border-radius:18px;
	position:relative;
	padding-top:4px;
}
.burger span{
	height:3px;
	width:67%;
	background-color:#eee;
	margin:4px auto 0 auto;
	display:block;
	overflow:auto;
}
/* ---------------- Banner ---------------- */
.banner {
	position:fixed;
	top:96px;
	left:0;	
	width:100%;
	background-color:rgba(34,184,199,0.65);
	text-align:right;
	height:auto;
	z-index:3;
	margin-top:0;

	padding:1rem;
	text-align:center;
	font-weight: bold;
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 160px;
    background-color:rgba(5,25,35,0.85);
    color: #c1c1c1;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    top:45px;
    left: 50%;
    margin-left: -80px;
    opacity: 0;
    transition: opacity 0.3s;
    text-transform: none; font-weight: normal;
    line-height: 1.2rem;
    font-style: italic;
}
.tooltip .tooltiptext.border {
	left:auto;
	right:4px;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: -10px; left: 50%;
    margin-left: -5px; border-width: 5px;
    border-style: solid;
    border-color: transparent transparent rgba(5,25,35,0.85) transparent;
}
.tooltip .tooltiptext.border::after {
	left:80%;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.modale .tooltip:hover .tooltiptext {
    visibility: hidden;
}
@media screen and (max-width: 768px) {
	.nav a.aburger { display:inline-block; }
	.nav .nav-links { display:none;}
	.nav .nav-links a{
		padding:0.2em 1.5em;
		line-height:2em;
		display:block;
		text-align:right;
	}
}

#modale-menu-content a{
	font-weight:bold;
	text-transform: uppercase;
	font-size:1.3em;
	padding:1em;
	display:block;
	vertical-align:top;
}
@media screen and (max-height: 500px) { #modale-menu-content a { padding:0.5em 1em; } }

.bullet { position:fixed; right:1rem; top:30%; width:30px; height:160px; z-index:100;}
.bullet a { background-color:#feffa3; display:block; width:12px; height:12px; border-radius:6px; margin:12px 8px;text-decoration:none;
	transition: all 500ms;
	-o-transition: all 500ms;
	-moz-transition: all 500ms;
	-webkit-transition: all 500ms;}
.bullet a.active { background-color:#22b8c7; border:2px solid #feffa3;}
.bullet a:hover, .bullet a:focus { background-color:#999; }
@media screen and (max-height: 768px) { .bullet { right:0rem; } }
/* ---------------- Pages ---------------- */
.page {
	overflow: auto;
	text-align:center;
	padding-top:3rem;
	padding-bottom:3rem;
	z-index:2;
	position:relative;
	background-color:transparent;
}
.boxe {
	text-align:center;
	width:30%;
	padding:0 1.5em;
	display:inline-block;
	vertical-align:top;
	margin:1em 0;
}
.box > img { height: 90px; }
.box.box-nomax > img { height: auto; max-width:100%; }
.box p { text-align: center; line-height: inherit; }
.box p.info { font-size: 1rem; font-style: italic; }
@media screen and (max-width: 768px) { .boxe { width:48%; } }
@media screen and (max-width: 460px) { .boxe { width:90%; } }
.clair { background-color: #eee;color:#051923;}
.clair-plus { background-color: #fff;color:#051923;}
.cyan { background-color: #22b8c7; color:#051923;}
.cyan h4, .cyan h5 { color: #fff;}
.marine { background-color: #051923;}
.marine a.bouton, .marine a.bouton:link, .marine a.bouton:visited { background-color: #22b8c7;color:#051923; }

.page.home {
    background-attachment: fixed;
    padding:0;
	background-color: #005a99;  

/*background: rgb(22,73,143);
background: -moz-linear-gradient(149deg, rgba(22,73,143,1) 50%, rgba(83,37,132,0.64) 100%);
background: -webkit-linear-gradient(149deg, rgba(22,73,143,1) 50%, rgba(83,37,132,0.64) 100%);
background: linear-gradient(149deg, rgba(22,73,143,1) 50%, rgba(83,37,132,0.64) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#16498f",endColorstr="#532584a3",GradientType=1);*/
}
.page.home .table, .page.home .header_mini {
	background-image:url("../img/style/background2025.png");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    -webkit-backgound-size: cover;
    -o-backgound-size: cover;
    -moz-backgound-size: cover;
    /*background-attachment: fixed;	*/
}
@media (max-width:768px){ .page.home {background-position:20% top;} }
.page.home header { 
	padding:0.5em;
	display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
     margin-top: 1rem;
     margin-bottom: -2rem;
     overflow: hidden;
}
.page.home .header_mini header { margin-top:4rem; }
.page.home h1 { 
	/*background:transparent url("../img/logo_n2i_color_title_2019.svg") no-repeat center center;*/
	background:none; 	
	overflow: hidden;
	font-size:1px; 
 }
.page.home h1 span { display:block;font-size:0.82em; font-family: 'Slackey', sans-serif;}
@media (max-width:540px){ 
	.page.home header img {height: auto;max-width: 100%;} 
	.page.home header h1 img {height: auto; max-width: 100%;}
}
@media (max-width:400px){ 
	.page.home .nyear { padding-left:4rem; line-height: 3rem}
}

.page.home header img { vertical-align: baseline; margin-bottom: 0; display: inline-block;}
.page.home h2 { font-size:1.35em;margin:1em auto 1em auto; }
@media (max-width:480px){ .page.home h2 { font-size:1em;} }
.page.home h2 b { font-weight: 700;}
.page.home .nyear { font-size:3em; font-family: 'Slackey', sans-serif; padding-left:5rem; line-height: 3rem}
.page.home .description { color:#eee; text-align:center;}
.page.home .description.dates { 
	/*border-top: 1px solid #cce0de;*/
    /*border-bottom: 1px solid #cce0de;*/
    /*line-height: 1.5rem;*/
    padding:.5rem ;
    margin-left:1rem;
    margin-right: 1rem;
    display: inline-block;
    font-size: 1.50rem; 
    font-style:normal;
    /*background-color: rgb(0,0,0,.4);*/
    font-weight: bold;
}
/*@media (max-width:420px){ .page.home .description.dates { max-width: 220px;} }*/
.page.home .description.suite { font-size: 1px; opacity: 0; }
.page.home .covid { 
	border-top: 2px solid #b51515;
    border-bottom: 2px solid #b51515;
    line-height: 1.5rem;
    padding:1rem ;
    
    font-size: 1.0rem; 
    font-style:normal;
    background-color: rgb(6 33 39 / 80%);
    margin-top: 1rem;
}
.page.home .covid p {
	color:#b51515;
	margin:0rem auto 1rem auto;
	font-weight: bold;
	text-align: center;
	font-size: 1.20rem; 
}
.page.home .partners img {vertical-align: middle;}
.page.home .lalune {
	position:fixed;
	width:150px;
	height:150px;
	background:transparent url("../img/style/lune.png") no-repeat center center;	
	top:3%;
	right:0%;
	opacity:0.6;
	display: none;
}

.page.home .header_mini { min-height: 300px; padding-top:5rem; padding-bottom:2rem; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.page.home .header_mini .nyear { margin-top:2rem; color:#ECC427; padding-left:0;font-size: 2rem;}
.page.home .header_mini h2{ margin-top:0;}
@media (max-width:580px){ .page.home .header_mini .nyear {font-size: 1.5rem;} }
.page.home.single-page .header_mini { min-height: auto; padding-top:1rem; }
.page.home.single-page .header_mini header{ margin-top:1rem; }

@keyframes fleche {
    0% {margin-top:0; }
    100% {margin-top:10px;}
}
.page.home a.down { height:76px;display:inline-block; margin-top: 1rem;}
@media (max-width:768px){ .page.home a.down {margin-top: 0rem;} }
.page.home a.down img {  
	animation: fleche 0.5s ease 0s infinite alternate;
	-webkit-animation: fleche 0.5s ease 0s infinite alternate;}

.stats { margin:0 2em 1em 2em; }
.stats a { display: inline-block; border:0; outline:0; }
.stats div {	
	width:auto;
	display:inline-block;
	text-align:center;
	margin:1em 0;
	padding:0 1em;
	font-size:11px; 
}
.stats div img { height:40px; opacity:0.75;}
.stats div big { color:#fff;font-size:2.0em; line-height:1.5em; font-weight:bold; display:block;background-color: rgba(0,0,0,.4);border-radius: 25px 25px 0px 0;}
.stats small { 	font-size:11px; color:#ECC427;background-color: rgba(0,0,0,.4); width: 100%; display: inline-block; padding: 0 5px 10px 5px;border-radius: 0 0 80px 0px;}
.stats a div big { text-decoration:none; color:#ECC427;}
.stats a:hover div big { color:#ECC427; }
.stats a div small { border-bottom:2px dotted #ECC427; }
.page.home .stats b { display: none; }

.page.inscription .stats div { font-weight: bold;}
.page.inscription .stats div img { height:50px; opacity:1;}
.page.inscription .stats div big { font-size:2.5em; }
@media screen and (max-width: 768px) { .stats div img { height:30px; } }

.page.lanuit { padding-bottom:0; }	
.page.lanuit ul { margin-top:1em; margin-bottom:1em;}

.page.inscription .notyet {
	font-size:2em;
	padding:2em;
	text-align:center;
}
.page.inscription .notyet .table { height:100%;}

/* ---------------- Nuits passees ---------------- */
.nuitspassees { margin-top:5rem!important;}
.nuitspassees .cd-horizontal-timeline { 
	opacity: 1;
	margin-top:10px;	
	margin-bottom:0;
	padding-bottom:2rem;
	font-weight:400;
	text-align:left;	
	transition: all 0.9s;
	-o-transition: all 0.9s;
	-moz-transition: all 0.9s;
	-webkit-transition: all 0.9s;	
}
.nuitspassees a {display:inline-block;}
.nuitspassees p a {display:block; margin-bottom: 0.35rem;}
.nuitspassees li { background-color:transparent; background-repeat: no-repeat; background-position: center center; background-size:cover!important;}
.nuitspassees #n2i2025 { background-image: url("../img/n2i2025_bg.png");}
.nuitspassees #n2i2024 { background-image: url("../img/n2i2024_bg.png");}
.nuitspassees #n2i2023 { background-image: url("../img/n2i2023_bg.png");}
.nuitspassees #n2i2022 { background-image: url("../img/n2i2022_bg.png");}
.nuitspassees #n2i2021 { background-image: url("../img/n2i2021_bg.png");}
.nuitspassees #n2i2020 { background-image: url("../img/n2i2020_bg.png");}
.nuitspassees #n2i2019 { background-image: url("../img/n2i2019_bg.png");}
.nuitspassees #n2i2018 { background-image: url("../img/n2i2018_bg.png");}
.nuitspassees #n2i2017 { background-image: url("../img/n2i2017_bg.png");}
.nuitspassees #n2i2016 { background-image: url("../img/n2i2016_bg.png");}
.nuitspassees #n2i2015 { background-image: url("../img/n2i2015_bg.png");}
.nuitspassees #n2i2014 { background-image: url("../img/n2i2014_bg.png");}
.nuitspassees #n2i2013 { background-image: url("../img/n2i2013_bg.png");}
.nuitspassees #n2i2012 { background-image: url("../img/n2i2012_bg.png");}
.nuitspassees #n2i2011 { background-image: url("../img/n2i2011_bg.png");}
.nuitspassees #n2i2010 { background-image: url("../img/n2i2010_bg.png");}
.nuitspassees #n2i2009 { background-image: url("../img/n2i2009_bg.png");}
.nuitspassees #n2i2008 { background-image: url("../img/n2i2008_bg.png");}
.nuitspassees #n2i2007 { background-image: url("../img/n2i2007_bg.png");}
.nuitspassees .stats_p div img { display:inline-block; height:30px; width:auto; margin-top:5px;vertical-align:bottom;}
.nuitspassees .stats_p div big  { display:inline-block; font-weight:bold;}
.nuitspassees .poster { border:8px solid #fff!important; float:right; margin : 0 0 1em 1em;}
.nuitspassees .max644 { padding-top:3em; padding-bottom: 3em;}
.nuitspassees .cd-horizontal-timeline .events-content li { background-color:#051923;background-size:cover;}
/* ---------------- Sponsors ---------------- */
.sponsors .spons { background-color:#fff;}
.sponsors .spons img { margin:0.65em; }
/* ---------------- Footer ---------------- */
.footer { font-size:0.9rem;}
/* -------------------------------------------- */
/* ---------------- Animations ---------------- */
/* -------------------------------------------- */
@keyframes showhide {
    0% {opacity:0;}
    100% {opacity:1;}
}
.responsive-container-main { overflow:hidden; width:100%; }
.responsive-container { position: relative; height:0; overflow: visible; }
.responsive-container .anim {
	position:absolute; 
	top: 0; 
	left: 0; 
	right:0; 
	margin-left: auto; 
	margin-right: auto; 
	width: 100%; 
	height: 100%;
}
@media screen and (max-width: 700px) {
	.responsive-container-main.pullRight, .responsive-container-main.pullLeft { float:none; }
}
.anim img { position:absolute; left:0; top:0; width:100%; height:auto;}
/* la Nuit*/
@keyframes checkhandA {
    0% {top:87%; }
    100% {top:88%;}
}
@keyframes checkhandB {
    0% {top:82%; }
    100% {top:83.5%;}
}
@keyframes hands {
    0% {left: 21%;top:88%; }
    30% {left: 21%;top:87.0%;}
    60% {left: 21%;top:88%;}
    80% {left: 20.5%;top:88%;}
    100% {left: 21%;top:88%;}
}
@keyframes soleil {
    0% {left: 0%; top:76%; opacity:1;}
    10% {left: 0%; top:76%; }
    40% {left: 10%; top:100%; opacity:0;}
    60% {left: 65%; top:100%; }
    90% {left: 75%; top:76%; }
    100% {left: 75%; top:76%; opacity:1;}
}
@keyframes lune {
    0% {opacity:0.1; }
    10% {opacity:0.1; }
    40% {opacity:1; }
    60% {opacity:1; }
    90% {opacity:0.1; }
    100% {opacity:0.1;}
}
@keyframes etoiles {
    0% {opacity:0; }
    10% {opacity:0.2; }
    40% {opacity:0.7; }
    45% {opacity:0.3; }
    50% {opacity:1; }
    55% {opacity:0.3; }
    60% {opacity:0.7; }
    90% {opacity:0.2; }
    100% {opacity:0;}
}
.responsive-container-main.anim_nuit {max-width:600px; max-height:225px;}
.responsive-container-main.anim_nuit .responsive-container {padding-bottom: 37.5%;}
.anim.anim_nuit .a0 { width:61.83%; height:51.11%; left: 20.5%; top:50%; }
.anim.anim_nuit .a4 { width:3.67%; height:6.22%; left: 56%; top:87%; 
	animation: checkhandA 0.25s ease 0s infinite alternate;
	-webkit-animation: checkhandA 0.25s ease 0s infinite alternate;}
.anim.anim_nuit .a5 { width:7.33%; height:11.55%; left: 58%; top:82%; 
	animation: checkhandB 0.25s ease 0s infinite alternate;
	-webkit-animation: checkhandB 0.25s ease 0s infinite alternate;}
.anim.anim_nuit .a6 { width:9.67%; height:9.33%; left: 21%; top:88%; 
	animation: hands 0.5s linear 0s infinite alternate;
	-webkit-animation: hands 0.5s linear 0s infinite alternate;}
.anim.anim_nuit .a1 { width:19.33%; height:51.55%; left: 0%; top:76%; 
	animation: soleil 8s linear 0s infinite alternate;
	-webkit-animation: soleil 8s linear 0s infinite alternate;}
.anim.anim_nuit .a2 { width:9%; height:23.11%; left: 50%; top:22%; opacity:0;
	animation: lune 8s linear 0s infinite alternate;
	-webkit-animation: lune 8s linear 0s infinite alternate;}
.anim.anim_nuit .a3 { width:58.33%; height:47.55%; left: 17%; top:2%; opacity:0;
	animation: etoiles 8s linear 0s infinite alternate;
	-webkit-animation: etoiles 8s linear 0s infinite alternate;}
/* sujet */
@keyframes sujet_tourne {
    0% {transform: rotate(-10deg);}
    50% {transform: rotate(15deg);}
    100% {transform: rotate(25deg);}
}
.responsive-container-main.anim_sujet {max-width:400px; max-height:136px;}
.responsive-container-main.anim_sujet .responsive-container {padding-bottom: 34%;}
.anim.anim_sujet .a1 { width:100%; height:100%; }
.anim.anim_sujet .a2 {
	width:37.25%; height:109.55%;
	left:69%; top:24%;
	animation: sujet_tourne 0.7s ease-in 0s infinite alternate;
	-webkit-animation: sujet_tourne 0.7s ease-in 0s infinite alternate;
}
.anim.anim_sujet .a3 {
	width:53%; 
	left:1%; bottom:0%; top:auto;
	animation: showhide 2s linear 0s infinite alternate;
	-webkit-animation: showhide 2s linear 0s infinite alternate;
}
.anim.anim_sujet .a4 {
	width:53%; 
	left:5%; bottom:0%; top:auto;
	animation: showhide 1.5s ease-out 2.3s infinite alternate;
	-webkit-animation: showhide 1.5s ease-out 2.3s infinite alternate;
}
/* geeks */
@keyframes bois_cafe {
    0% {left:73%;}
    50% {left:67%;top:64%;transform: rotate(0deg);}
    100% {left:67%;top:68%;transform: rotate(-60deg);}
}
@keyframes geeker {
    0% {top:49%;}
    50% {top:50%;}
    100% {top:51%;}
}
@keyframes bouge_yes {
    0% {top:19%;}
    100% {top:16%;transform: rotate(-10deg);}
}
.responsive-container-main.anim_geeks {max-width:400px; max-height:225px;}
.responsive-container-main.anim_geeks .responsive-container {padding-bottom: 56%;}
.anim.anim_geeks .a1 { width:100%; height:100%; }
.anim.anim_geeks .yes1 { width:12.75%; left:5%; top:6%; }
.anim.anim_geeks .yes2 { 
	width:20.5%; left:2%; top:18%;
	animation: bouge_yes 0.25s ease 0s infinite alternate;
	-webkit-animation: bouge_yes 0.25s ease 0s infinite alternate;		
}
.anim.anim_geeks .wf1 { 
	width:4.75%; left:30.5%; top:35%;
	animation: showhide 0.5s linear 0s infinite alternate;
	-webkit-animation: showhide 0.5s linear 0s infinite alternate;	
}
.anim.anim_geeks .wf2 { 
	width:8.5%; left:28.5%; top:30.2%; 
	animation: showhide 0.5s linear 0.5s infinite alternate;
	-webkit-animation: showhide 0.5s linear 0.5s infinite alternate;	
}
.anim.anim_geeks .m1 { 
	width:8.75%; left:50%; top:20%; 
	animation: showhide 2s linear 1s infinite alternate;
	-webkit-animation: showhide 2s linear 1s infinite alternate;	
}
.anim.anim_geeks .m2 { 
	width:13%; left:50%; top:27%;
	animation: showhide 2s linear 0s infinite alternate;
	-webkit-animation: showhide 2s linear 0s infinite alternate;	
}
.anim.anim_geeks .dev1 { 
	width:15%; left:46%; top:50%;
	animation: geeker 0.2s linear 0s infinite alternate;
	-webkit-animation: geeker 0.2s linear 0s infinite alternate;	
}
.anim.anim_geeks .arm { 
	width:22.5%; left:73%; top:64%;
	animation: bois_cafe 1.5s ease-in 0s infinite alternate;
	-webkit-animation: bois_cafe 1.5s ease-in 0s infinite alternate;
}
/* Jury */
@keyframes phone {
    0% {top:75%;}
    5% {top:73%;}
    10% {top:75%;}
    15% {top:73%;}
    20% {top:75%;transform:rotate(0deg);}
    60% {transform:rotate(-15deg);}
    100% {transform:rotate(15deg);}
}
@keyframes medailles {
    0% {top:53%;}
    100% {top:55%;}
}
@keyframes recomp {
    0% {transform:rotate(0deg);}
    20% {transform:rotate(5deg);}
    40% {transform:rotate(0deg);}
    100% {transform:rotate(0deg);}
}  
.responsive-container-main.anim_jury {max-width:440px; max-height:120px;}
.responsive-container-main.anim_jury .responsive-container {padding-bottom: 27%;}
.anim.anim_jury .a1 { width:100%; height:100%; top:0%; left:0%;}
.anim.anim_jury .a2 { width:36.82%; height:125%; top:18%; left:-0.7%;
	animation: recomp 0.5s ease-in 0s infinite alternate;
	-webkit-animation: recomp 0.5s ease-in 0s infinite alternate;
	}
.anim.anim_jury .a3 { width:9.09%; height:43.33%; top:53%; left:22%;
	animation: medailles 0.5s ease-in 0s infinite alternate;
	-webkit-animation: medailles 0.5s ease-in 0s infinite alternate;}
.anim.anim_jury .a4 { width:4.77%; height:22.5%; top:75%; left:41.5%;
	animation: phone 2s linear 0s infinite alternate;
	-webkit-animation: phone 2s linear 0s infinite alternate;}
.anim.anim_jury .a5 { width:13.18%; height:53.33%; top:11.5%; left:85.5%;
	animation: tourne 1.5s ease-in 0s infinite alternate;
	-webkit-animation: tourne 1.5s ease-in 0s infinite alternate;}
/* Un sujet */
@keyframes asujet {
    0% {transform: rotate(-10deg);}
    100% {transform: rotate(10deg);}
}
.responsive-container-main.anim_1sujet {max-width:85px; max-height:85px;}
.responsive-container-main.anim_1sujet .responsive-container {padding-bottom: 100%;}
.anim.anim_1sujet .a1 { width:71%; height:87%; left:8%; top:3%;}
.anim.anim_1sujet .a2 { width:78%; height:87%; left:5%; top:3%;
	animation: asujet 1s linear 0s infinite alternate;
	-webkit-animation: asujet 1s linear 0s infinite alternate;
}
/* Un defi */
.responsive-container-main.anim_1defi {max-width:90px; max-height:45px;}
.responsive-container-main.anim_1defi .responsive-container {padding-bottom: 50%;}
.anim.anim_1defi .a1 { width:46.09%; height:100%; left:28.33%; top:0%; }
.anim.anim_1defi .a2 { width:100%%; height:100%; left:0%; top:0%; 
	animation: showhide 1s linear 0s infinite alternate;
	-webkit-animation: showhide 1s linear 0s infinite alternate;}
.anim.anim_1defi .a3 { width:100%%; height:100%; left:0%; top:0%; 
	animation: showhide 1s linear 0.5s infinite alternate;
	-webkit-animation: showhide 1s linear 0.5s infinite alternate;}
.anim.anim_1defi .a4 { width:100%%; height:100%; left:0%; top:0%; 
	animation: showhide 1s linear 1s infinite alternate;
	-webkit-animation: showhide 1s linear 1s infinite alternate;}
/* Une equipe */ 
.responsive-container-main.anim_1team {max-width:90px; max-height:82px;}
.responsive-container-main.anim_1team .responsive-container {padding-bottom: 91%;}
.anim.anim_1team .a1 { width:100%%; height:100%; left:0%; top:0%; 
	animation: showhide 1.5s ease-out 0s infinite alternate;
	-webkit-animation: showhide 1.5s ease-out 0s infinite alternate;}
.anim.anim_1team .a2 { width:100%%; height:100%; left:0%; top:0%; 
	animation: showhide 1.5s ease-out 1.5s infinite alternate;
	-webkit-animation: showhide 1.5s ease-out 1.5s infinite alternate;}	
/* Une prez */
@keyframes ipad_tourne {
    0% {transform: rotate(-30deg);}
    100% {transform: rotate(10deg);}
}
@keyframes tremble {
    0% {margin-left:2px;}
    10% {margin-left:0;}
    20% {margin-left:2px;}
    30% {margin-left:0;}
    100% {margin-left:0;}
}
.responsive-container-main.anim_1prez {max-width:210px; max-height:70px;}
.responsive-container-main.anim_1prez .responsive-container {padding-bottom: 33%;}
.anim.anim_1prez .a1 { width:24.81%; height:85.55%; left:3.7%; top:8.89%; 
	animation: ipad_tourne 2s linear 0s infinite alternate;
	-webkit-animation: ipad_tourne 2s linear 0s infinite alternate;}
.anim.anim_1prez .a2 { width:38.89%; height:94.44%; left:23.70%; top:1.11%; }
.anim.anim_1prez .a3 { width:19.63%; height:54.44%; left:63.70%; top:37.78%; 
	animation: tremble 1s ease-out 0s infinite alternate;
	-webkit-animation: tremble 1s ease-out 0s infinite alternate;}
.anim.anim_1prez .a4 { width:17.41%; height:57.44%; left:80.74%; top:13.33%; 
	animation: tremble 1s ease-out 1.5s infinite alternate;
	-webkit-animation: tremble 1s ease-out 1.5s infinite alternate;}
/* Un jury */
@keyframes tourne {
    0% {transform: rotate(-5deg);}
    100% {transform: rotate(5deg);}
}
.responsive-container-main.anim_1jury {max-width:210px; max-height:70px;}
.responsive-container-main.anim_1jury .responsive-container {padding-bottom: 33%;}
.anim.anim_1jury .a1 { width:18.88%; height:66.67%; left:1.48%; top:28.89%; 
	animation: tourne 2s ease 0s infinite alternate;
	-webkit-animation: tourne 2s ease 0s infinite alternate;}
.anim.anim_1jury .a2 { width:17.04%; height:60%; left:19.63%; top:2.22%; 
	animation: tourne 2s ease 1s infinite alternate;
	-webkit-animation: tourne 2s ease 1s infinite alternate;}
.anim.anim_1jury .a3 { width:15.93%; height:56.67%; left:33.33%; top:38.89%; 
	animation: tourne 2s ease 2s infinite alternate;
	-webkit-animation: tourne 2s ease 2s infinite alternate;}
.anim.anim_1jury .a4 { width:13.33%; height:40%; left:54.81%; top:44.44%; 
	animation: tremble 1s ease-out 1.5s infinite alternate;
	-webkit-animation: tremble 1s ease-out 1.5s infinite alternate;}
.anim.anim_1jury .a5 { width:29.26%; height:85.55%; left:68.52%; top:11.11%; }
.anim.anim_1jury .a6 { width:7.41%; height:34.44%; left:82.22%; top:27.78%; 
	animation: showhide 1s ease 0s infinite alternate;
	-webkit-animation: showhide 1s ease 0s infinite alternate;}

.clock { 
	margin-bottom: 1rem;
	padding:18px;
	position: relative;
	display: inline-block;
}
.clock .logo-clock {
	position: absolute;
	top:42px;
	left:42px;
	background-color: rgba(0,0,0,0.85);
	border-radius: 50%;
	padding:12px;
	width:100px;height: 100px;
}
.clock .logo-clock img { display:block; width:100%;height: 100%;}

@keyframes clockturn {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.clock .anim-clock {
	position: absolute;
	top:0;
	left:0;
	width:100%;height: 100%;
}
.clock .anim-clock img {
	width:100%;height: 100%;
	animation: clockturn 2s 0s ease-out infinite;
	-webkit-animation: clockturn 2s 0s ease-out infinite;
}
.clock .pie {
	display: inline-block;
	position: relative;
	width: 150px;
	line-height: 150px;
	border-radius: 50%;
	background: #ECC427;
	background-image: linear-gradient(to right, transparent 50%, #106e77 0);
	color: transparent;
	text-align: center;
}
@keyframes spin {
	to { transform: rotate(.5turn); }
}
@keyframes bg {
	50% { background: #106e77; }
}   
.clock .pie::before {
	content: '';
	position: absolute;
	top: 0; left: 50%;
	width: 50%; height: 100%;
	border-radius: 0 100% 100% 0 / 50%;
	background-color: inherit;
	transform-origin: left;
	animation: spin 50s linear infinite, bg 100s step-end infinite;
	animation-play-state: paused;
	animation-delay: inherit;
}

/* Autres pages */
.page.QAndA p.pbig{
margin-top:2rem;
}
.page.QAndA .answer{
padding-left:5%;
border-left: 0px solid #4db8c7;
}
.page.QAndA .answer li{
padding-bottom: 0;
}
.page.QAndA ul.subnav li {
	display: inline-block;
    padding: 0 1.3rem 1rem 1.3rem;
    list-style: none;
}
.page.QAndA ul.subnav .active {
	background-color: #ECC427;
	position: relative;
}
.page.QAndA ul.subnav .active::after {
	content:'';
	width:0;
	height:0;
	border-style: solid;
	border-width: 15px 15px 0px 15px;
    border-color: #ecc444 transparent transparent transparent;
    position: absolute;
    left: 40%;
    left:calc(50% - 15px);
    bottom: -16px;
}
.page.QAndA .qa_container {
	border: 2px solid #ECC427;
    padding: 0rem 2rem 2rem 2rem;
}
@media (max-width:768px){ .page.QAndA .qa_container {padding: 0rem 1rem 1rem 1rem} }
.page.QAndA ol li { text-align: justify;  }

.page.QAndA .qa_container { display: none; }
.page.QAndA .qa_container.active { display: block; }

.page.charte .warning{  text-align:left; padding:1.5rem 1.5rem 1.5rem 4rem;; border-radius: 40px; text-indent: 0;line-height: 1.5rem;font-weight: 400;}
.page.charte .warning p, .page.charte .warning li, .page.charte .infomsg p, .page.charte .infomsg li{ line-height: 1.5rem; }
.page.charte .warning li, .page.charte .infomsg li{ padding-bottom: 0; }