@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'HighTide';
  src: url('../fonts/high_tide_bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.cf:before,.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}

html{
  width:100vw;
  height:100vh;
  font-family: 'Roboto Condensed', sans-serif;
  color:#1D1D1B;
  font-size: 14px;
  line-height: 1.6em;
  overflow-x: hidden;
}
body{width:100%;}


::-webkit-scrollbar{
  width: 6px;  /* for vertical scrollbars */
  height: 6px; /* for horizontal scrollbars */
	z-index: 3000;
}
::-webkit-scrollbar-track{background: rgba(0, 0, 0, 0);}
::-webkit-scrollbar-thumb{background: #CECEC1;}

a, a:active,a:visited,a:hover{color:#1D1D1B;text-decoration: none;}
[onclick]:hover{cursor:pointer;}
strong{font-weight: 700;}

header.top{
  display:flex;
  height: 70px;
  width:100vw;
  position:-webkit-sticky;
  position: sticky;
  top:0;left:0;
  box-sizing: border-box;
  flex-direction: row;
  padding: 0 20px;
  align-items: center;
  z-index: 2000;
}

header .logo svg{height:50px;}

.navigation, .cta-billetterie{
  text-transform: uppercase;
  font-family: 'HighTide';
  font-weight: 700;
  padding-left: 30px;
  padding-bottom: 5px!important;
  line-height: 35px!important;
  margin:0!important;
}
.cta-billetterie{margin:0 0 10px 0!important;}
.cta-billetterie::after {
  content: attr(date);
  position: absolute;
  font-size: 14px;
  margin-left: -16px;
  margin-top: -2px;
  font-weight: 700;
  color: #1D1D1B;
  display: block;
  width: 300px;
}
body.hometop .cta-billetterie::after,body:not(.default) .cta-billetterie::after{color: #FDFDFD;}

.navigation nav.pages{font-size: 16px;}
nav.pages a{padding-right: 1em;}

.navigation .page{
  font-size: 35px;
  line-height: 1.2em;
  transform: translateY(-3px);
}
.cta{
  padding:0 16px;
  font-size: 22px;
  font-weight: 500;
  color:#FDFDFD!important;
  display: inline-block;
  line-height: 42px;
  margin-left: 30px;
  background: #1D1D1B;
}
.cta-center{display: table;margin: 20px auto;}

body.hometop header.top{justify-content: space-between;}
body.hometop header .logo {align-self: flex-start;padding-top: 20px;}
body.hometop header .logo svg{height:13vh;}
header .logo .baseline{
  font-family: 'Roboto', sans-serif;
  font-size: 1.36vh;
  padding-left: 1.7vh;
}
body:not(.hometop) header .logo .baseline{display:none}
body.hometop .navigation nav.pages{font-size: 1.1vw}

body:not(.hometop) .cta-billetterie{position: absolute; top:7px;right:13vw;}
body:not(.hometop) .secondary{position: absolute; right:20px;}

.secondary ul{text-align: right;}
.secondary ul a,.secondary ul li{display:inline;line-height:25px;}
.lang-selector li.active{font-weight:900}
.social-links{text-align: right;font-size:1.3vw;transform: translateY(-1px);}
.social-links a{padding-left: 12px;}

body:not(.hometop) header.top{background-color:#FDFDFD}
body:not(.default) header .logo svg,
body.hometop header .logo svg{fill:#FDFDFD}
body:not(.default) header.top *,
body.hometop header.top *{color:#FDFDFD}
body:not(.default) header.top .cta-billetterie,
body.hometop header.top .cta-billetterie{background-color:#FDFDFD;}
body.hometop header.top .cta-billetterie{color: #1D1D1B!important}

body.jeux header.top,body.jeux .cta{background-color:#F06E42}
body.jeux header .cta-billetterie{color:#F06E42!important;font-weight:700;}

body.conferences header.top,body.conferences .cta{background-color:#FFC93D}
body.conferences header .cta-billetterie,
body.conferences .event .titre .intervenants{color:#FFC93D!important;font-weight:700;}

body.showtell header.top,body.showtell .cta{background-color:#00AAA0}
body.showtell header .cta-billetterie{color:#00AAA0!important;font-weight:700;}

body.activites header.top,body.activites .cta{background-color:#EB4774}
body.activites header .cta-billetterie,
body.activites .event .titre .intervenants{color:#EB4774!important;font-weight:700;}


.stripes{font-family: 'HighTide';line-height:.2em;position:relative;font-size: 9vh;font-weight:700;color:#FDFDFD;text-transform: uppercase;padding:0 0 4px .5em;padding-bottom:.27em}
.stripes:not(:empty)::before{content:'';width: .5em; display:block;height:100%;position: absolute;right:calc(100% - .5em);top:0;}
.stripes p{display: inline;line-height:1.04em;padding-bottom:.3em;}

h1.stripes::before{height:calc(100% + .3em)}

.stripes::before,.stripes p{background-color:#1D1D1B}
.stripes.jeux::before,.stripes.jeux p,
body.jeux .stripes::before,body.jeux .stripes p,
.bande.jeux::before, .bande.jeux .intro,
body.jeux .jeu .panel
{background-color:#F06E42}
.stripes.conferences::before,.stripes.conferences p,
body.conferences .stripes::before,body.conferences .stripes p,
.bande.conferences::before, .bande.conferences .intro,
body.conferences .event .panel
{background-color:#FFC93D}
.stripes.showtell::before,.stripes.showtell p,
body.showtell .stripes::before,body.showtell .stripes p,
.bande.showtell::before, .bande.showtell .intro
{background-color:#00AAA0}
.stripes.activites::before,.stripes.activites p,
body.activites .stripes::before,body.activites .stripes p,
.bande.activites::before, .bande.activites .intro,
body.activites .event .panel
{background-color:#EB4774}


/*//////// HOMEPAGE SLIDES /////*/

main.slideshow{height:100vh;width:100vw;margin-top:-70px;margin-bottom:40px}
.slide{width:100%;height:100%;position: relative;background-attachment: fixed;background-size: cover;background-repeat: no-repeat;}
.slide img{width:100%;height:100%;object-fit: cover;object-position: center;}
.slide h2{position: absolute;top:calc(23vh + 20px);left:0;font-size:9vh}
.slide:not(:empty)::before{
  content:'';
  position:absolute;top:0;
  width:100%;height:100%;
  background-color:rgba(0,0,0,.5);
  background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0), rgba(0,0,0,.5));
}

.slideshow[page="0"]>.slide:not(:nth-child(1)){display:none}
.slideshow[page="1"]>.slide:not(:nth-child(2)){display:none}
.slideshow[page="2"]>.slide:not(:nth-child(3)){display:none}
.slideshow[page="3"]>.slide:not(:nth-child(4)){display:none}

.slide nav.programme{font-family: 'HighTide';overflow:hidden;position:absolute;bottom:-.18em;text-transform:uppercase;font-size:4.77vw!important;font-weight:700}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .slide nav.programme{font-size:4.954vw!important;}
}
html[lang="en"] .slide nav.programme{font-size: 5.05vw;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  html[lang="en"] .slide nav.programme{font-size:5.24vw}
}
.slide nav.programme a{color:#FDFDFD;display:inline-block;float:left;}
.slide.jeux nav a.active{color:#F06E42}
.slide.conferences nav a.active{color:#FFC93D}
.slide.showtell nav a.active{color:#00AAA0}
.slide.activites nav a.active{color:#EB4774}

a.banner{
  display: block;
  width:100vw;
  height:25vw;
  margin-top: -30px;
}
a.banner img{width:100%;height:100%;object-fit: cover;}

main.center{
  width:100%;
  max-width:1220px;
  padding: 20px;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
}
@media (max-width:720px) {
  main.center{padding: 20px 0}
}
img.topbanner{
  width:100%;
  height:40vh;
  object-fit: cover;
}

main>h1.baseline{
  font-size: 6.67vh;
  position: relative;
  padding-left:0;
}
main>h2.baseline{
  font-size: 4.67vh;
  position: relative;
  padding:0;
}
h3.baseline{
  font-size: 3.7vh;
  position: relative;
  padding:0;
  text-align: right;
}
main>img+h1.baseline:not(:empty){margin-top:-11vh;}
main>img+h2.baseline:not(:empty){margin-top:-8.5vh;}
main>h1.baseline::before,
main>h2.baseline::before{
  width:100vw!important;
  right:100%!important;
}
h3.baseline::before{
  width:20px;
  left:100%
}

section.maintext.container {
  max-width: 800px;
  margin: 0 auto;
  font-size: 19px;
  padding: 2em 10px 1em 10px;
  box-sizing: border-box;
}
.maintext p{line-height: 1.55em}
.maintext p{margin-bottom: 1em}
.maintext strong{font-weight: 700}
.maintext ul{margin-top:-1em;padding-left: 1em}
.maintext ul ul{margin-top:0;padding-left: 2em}
.maintext li{list-style: square;}
.maintext h2{font-family: 'HighTide';font-size: 30px;font-weight:700;text-transform: uppercase;}
.maintext h3{font-family: 'HighTide';font-size: 24px;font-weight:700;}
.maintext figure,.maintext figure img,.maintext iframe{width:100%}
.maintext figure{margin-bottom: 20px}
.maintext em,.maintext i{font-style: italic;}
.maintext strong,.maintext b{font-weight: 700;}

.centertext{text-align: center;margin-top: 70px}

.event .description{
  font-size: 16px
}

.cta-calendar{margin: 0;}
.cta-calendar .atcb-link{font-size:0;position: absolute;left:0;top:0;width:100%;height:100%;}
.cta-calendar::before{content:attr(text);font-size:20px}
.cta-calendar a{line-height: 42px;}
.cta-calendar ul{
  margin:0;
  padding:0 1em;
  width:100%;
  box-sizing: border-box;
  border: #CCC 1px;
  border-style: none solid solid solid;
}
.cta-calendar li a{
  font-size: 15px;
  line-height: 30px;
}
@media (max-width:720px) {
  .event .panel{padding:50px 10px 10px 10px!important}
  .cta-calendar{border:1px solid #FFF}
}

.qa{margin-bottom:20px}
.qa:not(.open) .answer{height:0;border-color:#FFF}
.qa .question{
  font-size: 20px;
  font-weight: 700;
  font-family: 'HighTide';
  text-transform: uppercase;
  display: block;
}
.qa .question::before{
  font-family: 'FontAwesome';
  content: '\f078';
  transform: translate(-6px,-3px);
  display: inline-block;
  font-size: .7em;
}
.qa.open .question::before{
  content: '\f077';
}
.qa .answer{
  height:auto;
  width: auto;
  font-size: 16px;
  display: inline-block;
  overflow:hidden;
  transition: height .8s linear;
  border: #CCC 1px;
  border-style: none none solid solid;
  padding: 0 20px;
  box-sizing: border-box;
}
.qa .answer :first-child{padding-top:20px}

@media (min-width:1024px) {
  .programme .bande{
    max-width: 1200px;
    display: block;
    margin: 60px auto;
    min-height:320px;
    padding: 0 20px;
    position: relative;
    color:#FDFDFD;
    font-size: 15px;
    line-height: 1.4em;
  }
  .programme .bande::before{
    content:'';
    display: block;
    width: 100vw; height: 86%;
    position: absolute;
    top:7%;left: calc(((100vw - 100%) /2) * -1);
    z-index: -1;
  }
  .programme .bande img{height:320px;width:calc(320px * 1.61);object-fit: cover;z-index: -1}
  .programme .bande .intro{width:34%;padding: 20px 0 20px 20px;margin-top:2.1%;float:left}
  .programme .bande .intro h2{font-family: 'HighTide';font-size:50px;font-weight:700;text-transform: uppercase;}
  .programme .bande .intro .cta{margin:0;background:transparent;padding:0;text-transform: uppercase;font-weight:500}

  .programme .bande:nth-child(odd) img{position:absolute;right:20px;}
  .programme .bande:nth-child(odd) h2.stripes{font-size:65px;position: absolute;top:calc((100% - 234px) /2);left:40%}

  .programme .bande:nth-child(even) img{position:absolute;left:22%;}
  .programme .bande:nth-child(even) h2.stripes{font-size:65px;position: absolute;top:calc((100% - 234px) /2);left:-20px}
  .programme .bande:nth-child(even) .intro{float:right}
}
@media (max-width:1023px) {
  .programme .bande{display: block;margin-bottom: 40px}
  .programme .bande.jeux{background-color:#F06E42}
  .programme .bande.conferences{background-color:#FFC93D}
  .programme .bande.showtell{background-color:#00AAA0}
  .programme .bande.activites{background-color:#EB4774}

  .programme img{width: 100vw}
  .programme h2{position: relative;margin-top:-110px;font-size: 10vw}
  .programme .intro h2{display:none}
  .programme .intro{font-size: 15px;color:#FDFDFD;padding:10px 10px 10px 20px}
  .programme .bande .cta{background: transparent;margin:0;padding-left:0;font-weight:700;text-transform: uppercase;}
}



.small-grid{display:flex;flex-wrap:wrap;justify-content:space-around;align-items: center;}
.small-grid>*{width:calc((100% - (3 * 20px)) / 4);}

.partenaire img{width: 100%;}
.partenaire:hover img{opacity:.6}


section.liste.events {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}
@media (min-width:900px) {
  section.liste.events article {
    width: calc(50% - 20px);
  }
}

.event{
  width: 100%;
  position: relative;
  min-height:200px;
  max-height: 600px;
  overflow: hidden;
  margin-bottom: 20px;
}
.event:hover{cursor: default;}

.event img, .jeu img{
  width:100%;
  height:100%;
  object-fit: cover;
  position:absolute;
  top:0;left:0;
  z-index: -1
}

.event .titre{
  position: absolute;top:calc(50% - 30px);
  width:100%;text-align: center;
  transition: opacity .3s linear;
  transition-delay:.5s;
}
.event::before{
  content: '';
  position: absolute;
  top:0;left:0;
  width:100%;height:100%;
  background: rgba(255,255,255, 0.2);
  transition: opacity .3s linear;
  transition-delay:.5s;
}
.event.dark::before{background: rgba(0,0,0, 0.3);}
.event.dark .titre h2{color:#FDFDFD}
.event .titre .intervenants{font-size:30px;font-weight:700;text-shadow: 0 0 8px rgba(0,0,0,.4)}
.event:hover .titre,.event:hover::before{opacity:0;transition-delay:0s;}
.event .panel, .jeu .panel{
  color:#FDFDFD;
  min-height: 200px;
  height: 100%;
  transform:translateX(-100%);
  transition:transform .2s cubic-bezier(1, 0.22, 0.68, 0.96);transition-delay:0s;
  width:33%;min-width: 300px;padding:20px
}
.event .panel time{color: #1D1D1B;font-size:18px;margin:5px 0 10px 0;}

.event:hover .panel{transform:translateX(0);transition-delay:0s}
.event .cta-calendar{position: absolute;top:20px;right:20px;}

main.jeux{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-around;
}
.jeu{
  position: relative;
  width:calc((100% - (3 * 20px)) / 4);
  height: 260px;
  overflow: hidden;
  margin-bottom: 20px;
}
@media (max-width:1025px) {
  .jeu{width: calc((100% - (1 * 20px)) / 2)}
}
@media (max-width:600px) {
  .jeu{width: 100%}
}
.jeu .panel{
  transform:translateY(calc(100% - 62px));
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  min-width: auto;
  font-size: 15px;
  padding: 6px 20px;
  background-color: #F06E42;
  transition-delay:0s
}
.jeu .panel strong {display: inline-block;width: 100px;    vertical-align: top;}
.jeu .panel span {display: inline-block;width: calc(100% - 100px);}
.jeu:hover .panel{transform:translateY(20%);}
.jeu h2{font-family: 'HighTide';font-size: 20px;font-weight:700;text-transform: uppercase;padding-bottom: 25px}
.jeu .cta{text-transform: uppercase;margin:0;padding:0;background-color: #F06E42}

.cta-gamelink{
  position: absolute;
  right: 40px;
  top: 40px;
}

footer.signature {
  position: fixed;
  bottom: 8px;
  right: 20px;
  opacity: .8;
}
footer.signature a:not(:hover){
  opacity: .6;
}
footer.signature em{color:#F06E42}

body[page="Home"] main.jeux{margin-bottom: 140px}

section.winners{
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 50px;
}
a.winner{
  width: calc(50% - 20px);
  position: relative;
  margin: 10px;
}
a.winner img{
  width:100%;
  height: 34vh;
  object-fit: cover;
}
a.winner h3{
  position: absolute;
  top:60%;
  right:10px;
}
a.winner h3::before{background:#F06E42}
a.winner h3 p{background: #F06E42}
a.winner h3 span{font-size: 2.67vw;line-height: 1em;background: #F06E42;padding-right:18px;margin-right: -18px;}
a.winner h3.stripes::before{height:calc(100% + .26em);}

section.galerie{
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
section.galerie figure{
  width: 33.333332%;
  display:block;
  height:30vw;
  max-height: 386px;
}
figure>img{width: 100%;height: 100%;object-fit: cover;display: block;}

section.galerie figure.open{
  position: fixed;
  top:0;left:0;
  width:100vw;height:100vh;max-height: 100vh;
  display: flex;
  align-items: center;
  padding: 50px 10px 100px 10px;box-sizing: border-box;
  background-color: rgba(0,0,0,.7);
  z-index: 3000;
}
section.galerie figure.open img{object-fit: scale-down;}

@media (min-width:1025px) {
  .mobileonly{display:none!important}
}

@media (max-width:1023px) {
  header .logo .baseline{display:none}
  header.top{position: fixed;background-color: #FDFDFD;padding:0 10px;display: block;height:60px}
  header .logo svg{height:40px!important;margin-top:10px}
  body.hometop header .logo svg{fill:#1D1D1B}
  header.top .hamburger{
    font-size: 30px;
    line-height: 40px;
    position: absolute;
    right: 10px;
    top: 10px;
  }
  header.top .hamburger::before{
    font-family: 'FontAwesome';
    content:'\f0c9';
  }
  body.hometop header.top .hamburger::before{color: #1D1D1B}
  header.top .page{display:none}

  header+*{padding-top:80px!important;}

  header.top.dropdown-open{height: auto;}
  header.top.dropdown-open .navigation{width:100%;padding: 0}
  header.top.dropdown-open .navigation a{display: block;width:100%;line-height:45px;font-size:20px;}
  body.hometop header.top.dropdown-open *{color: #1D1D1B}
  body.hometop header.top.dropdown-open .cta{color: #FDFDFD!important;background-color:#1D1D1B!important }
  header.top.dropdown-open .cta-billetterie{position: static;margin: 30px auto!important;display: table;}
  header.top.dropdown-open .secondary{position:static;padding-bottom: 20px;width:100%;display:block;}
  header.top.dropdown-open .secondary ul{text-align: center}
  header.top.dropdown-open .social-links{font-size: 16px}
  .secondary li{padding: 0 6px}

  header.top:not(.dropdown-open) .navigation,
  header.top:not(.dropdown-open) .cta-billetterie,
  header.top:not(.dropdown-open) .secondary{
    display: none
  }
  footer.signature{font-size: 8px}

  main>h1.baseline{font-size: 10vw}
  .maintext{font-size: 16px}
  .maintext h2{font-size:24px}
  .maintext iframe{height:calc(100vw * .68)}
  .cta-gamelink{right: 10px;top: 90px;}

  section.galerie figure{width:50%;}
  a.winner{width:calc(100% - 20px);}
  a.winner img{height:50vw;}
  a.winner h3{font-size: 4.5vw}
  a.winner h3 span{font-size: 6.5vw}
}