body {
  overflow: hidden;
  font-family: Oswald, sans-serif;
  background: #345060
}
.btn-infos {
  display: block;
  position: fixed;
  right: 14px;
  top: 14px;
  border: 2px solid #fff;
  text-align: center;
  line-height: 38px;
  width: 40px;
  height: 40px;
  font-size: 1.4em;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  z-index: 950;
  color: #fff;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  opacity: .7
}
.btn-infos p {
  margin: 0
}
.btn-infos p span {
  display: block;
  position: absolute;
  right: 20px;
  top: 0;
  margin: 0;
  opacity: 0;
  font-size: 80%;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out
}
.btn-infos p.btn-open {
  display: none
}
.btn-infos:focus {
  text-decoration: none;
  color: #fff
}
.btn-infos:hover {
  background: #fff;
  color: #153b50;
  text-decoration: none;
  opacity: 1
}
.btn-infos:hover p span {
  right: 50px;
  opacity: 1;
  color: #fff
}
.btn-infos.on p.btn-open {
  display: block
}
.btn-infos.on p.btn-close {
  display: none
}
.btn-slide {
  display: none;
  height: 80px;
  width: 80px;
  position: fixed;
  top: 50%;
  margin-top: -40px;
  z-index: 500;
  cursor: pointer;
  border: 2px solid #fff;
  text-align: center;
  color: #fff;
  line-height: 80px;
  overflow: hidden;
  text-indent: -9999px;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out
}
@media (min-width:992px) {
  .btn-slide {
    opacity: .5
  }
  .btn-slide:hover {
    opacity: 1
  }
}
@media (max-width:480px) {
  .btn-slide {
    -moz-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -o-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6)
  }
}


p {
    margin: 0 0 10px;
	font-size: 30px !important;
}



.btn-slide:after {
  position: absolute;
  content: "";
  background: #fff;
  height: 2px;
  width: 30px;
  top: 28px;
  left: 40px;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out
}
@media (min-width:992px) {
  .btn-slide:after {
    left: 22px
  }
}
.btn-slide:before {
  position: absolute;
  content: "";
  background: #fff;
  height: 30px;
  width: 2px;
  top: 34px;
  left: 54px;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out
}
@media (min-width:992px) {
  .btn-slide:before {
    left: 36px
  }
}
.btn-slide.btn-prev {
  left: -40px
}
@media (min-width:992px) {
  .btn-slide.btn-prev {
    left: 50px
  }
}
.btn-slide.btn-prev:after, .btn-slide.btn-prev:before {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.btn-slide.btn-prev:hover {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg)
}
.btn-slide.btn-prev:hover:after {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  top: 72px;
  left: 2px
}
.btn-slide.btn-prev:hover:before {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  top: 44px;
  left: 2px
}
.btn-slide.btn-next {
  right: -40px
}
@media (min-width:992px) {
  .btn-slide.btn-next {
    right: 50px
  }
}
.btn-slide.btn-next:after {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 6px
}
@media (min-width:992px) {
  .btn-slide.btn-next:after {
    left: 22px
  }
}
.btn-slide.btn-next:before {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 20px
}
@media (min-width:992px) {
  .btn-slide.btn-next:before {
    left: 36px
  }
}
.btn-slide.btn-next:hover {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.btn-slide.btn-next:hover:after {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  top: 71px;
  left: 42px
}
.btn-slide.btn-next:hover:before {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  top: 42px;
  left: 71px
}
.content {
  position: relative;
  overflow: hidden;
  overflow-y: scroll;
  height: 100vh;
  background: #fff
}
.share-box {
  display: block;
  position: absolute;
  left: 0;
  top: 14px;
  width: 100%;
  height: 38px;
  text-align: center;
  z-index: 100
}
.share-box a {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  color: #fff;
  font-size: .9em;
  padding: 0 14px 0 40px;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  border: 1px solid transparent;
  background: url(../../images/social-ico.png) center left no-repeat #345060
}
.share-box a.twitter {
  background-position: 0 0
}
.share-box a.facebook {
  background-position: 0 -40px
}
.share-box a:focus {
  color: #fff;
  text-decoration: none
}
.share-box a:hover {
  text-decoration: none;
  color: #fff;
  background: url(../../images/social-ico.png) center left no-repeat #153b50;
  border: 1px solid #fff
}
.share-box a:hover.twitter {
  background-position: 0 0
}
.share-box a:hover.facebook {
  background-position: 0 -40px
}
.credits {
  display: none;
  position: fixed;
  height: 100vh;
  width: 100%;
  left: 0;
  top: 0;
  background: #153b50;
  z-index: 900;
  text-align: center;
  color: #fff;
  padding-top: 50px;
  overflow: hidden;
  overflow-y: scroll
}
.credits h2 {
  -webkit-font-smoothing: antialiased;
  font-size: 1.2em;
  font-weight: 300
}
.credits img {
  max-width: 100%;
  margin-bottom: 40px
}
.credits h3 {
  -webkit-font-smoothing: antialiased;
  margin: 14px auto;
  padding: 14px 0;
  position: relative
}
.credits h3:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 80px;
  margin-left: -40px;
  height: 1px;
  background: #205978
}
.credits p {
  margin-bottom: 40px;
  font-weight: 300
}
.credits p span {
  font-size: 1.2em;
  -webkit-font-smoothing: antialiased;
  display: block
}
.first-slide {
  background: #153b50
}
.first-slide .header-month {
  border: 0 !important
}
.first-slide .header-month h1 {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 6em;
  line-height: 1em;
  display: block;
  margin: 0 0 20px;
  -webkit-font-smoothing: antialiased
}
@media (min-width:480px) {
  .first-slide .header-month h1 {
    font-size: 8em
  }
}
@media (min-width:768px) {
  .first-slide .header-month h1 {
    font-size: 12em
  }
}
@media (min-width:992px) {
  .first-slide .header-month h1 {
    font-size: 16em
  }
}
@media (min-width:1200px) {
  .first-slide .header-month h1 {
    font-size: 18em
  }
}
.first-slide .header-month .play {
  display: inline-block;
  padding: 15px 20px;
  border: 2px solid #fff;
  color: #fff;
  font-size: 1.2em;
  line-height: 1em;
  margin-bottom: 64px;
  font-weight: 400;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-font-smoothing: antialiased
}
.first-slide .header-month .play:hover {
  border: 2px solid #345060;
  text-decoration: none
}
.first-slide .header-month .play:active, .first-slide .header-month .play:focus {
  text-decoration: none;
  border: 2px solid #fff
}
.first-slide .description {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -171px;
  display: none;
  width: 342px;
  height: 140px;
  text-align: center;
  background: url(../../images/navigation.png) center bottom no-repeat;
  opacity: .6;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out
}
.first-slide .description p {
  display: block;
  width: 120%;
  height: auto;
  position: absolute;
  bottom: 110px;
  opacity: 0;
  left: -10%;
  margin: 0;
  font-size: 1.1em;
  line-height: 1.1em;
  color: #fff;
  font-weight: 300;
  padding-bottom: 13px;
  -webkit-font-smoothing: antialiased;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out
}
.first-slide .description:hover {
  cursor: pointer;
  opacity: 1
}
.first-slide .description:hover p {
  bottom: 130px;
  opacity: 1
}
@media (min-width:768px) {
  .first-slide .description {
    display: block
  }
}
.month {
  position: absolute;
  top: 0;
  overflow: hidden;
  min-height: 100vh
}
.month.janvier .header-month {
  background: url(../../images/photo-janvier.jpg) center top no-repeat fixed
}
.month.fevrier .header-month {
  background: url(../../images/photo-fevrier.jpg) center top no-repeat fixed
}
.month.mars .header-month {
  background: url(../../images/photo-mars.jpg) center top no-repeat fixed
}
.month.avril .header-month {
  background: url(../../images/photo-avril.jpg) center top no-repeat fixed
}
.month.mai .header-month {
  background: url(../../images/photo-mai.jpg) center top no-repeat fixed
}
.month.juin .header-month {
  background: url(../../images/photo-juin.jpg) center top no-repeat fixed
}
.month.juillet .header-month {
  background: url(../../images/photo-juillet.jpg) center top no-repeat fixed
}
.month.aout .header-month {
  background: url(../../images/photo-aout.jpg) center top no-repeat fixed
}
.month.septembre .header-month {
  background: url(../../images/photo-septembre.jpg) center top no-repeat fixed
}
.month.octobre .header-month {
  background: url(../../images/photo-octobre.jpg) center top no-repeat fixed
}
.month.novembre .header-month {
  background: url(../../images/photo-novembre.jpg) center top no-repeat fixed
}
.month.decembre .header-month {
  background: url(../../images/photo-decembre.jpg) center top no-repeat fixed
}
.month .header-month {
  text-align: center;
  display: table;
  width: 100%;
  position: relative;
  color: #fff;
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-bottom-color: #22343f
}
.month .header-month .vertical-content {
  display: table-cell;
  vertical-align: middle
}
.month .header-month .vertical-content h2 {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .125em;
  font-size: 2em;
  line-height: 1em;
  display: inline-block;
  margin: 0;
  padding: 16px;

}
@media (min-width:480px) {
  .month .header-month .vertical-content h2 {
    font-size: 2.5em
  }
}
@media (min-width:768px) {
  .month .header-month .vertical-content h2 {
    font-size: 3.4em
  }
}
@media (min-width:992px) {
  .month .header-month .vertical-content h2 {
    font-size: 4.6em
  }
}
@media (min-width:1200px) {
  .month .header-month .vertical-content h2 {
    font-size: 6em
  }
}
.month .event {
  width: 100%;
  position: relative;
  overflow: hidden
}
.month .event .image-wrapper {
  text-align: center
}
.month .event .image-wrapper img {
  max-width: 100%
}
.month .event .article-event {
  position: relative;
  z-index: 20;
  background: #fff;
  text-align: left;
  padding: 70px 30px 40px;
  width: 94%;
  margin: auto;
  top: -60px
}
.month .event .article-event .date {
  display: block;
  color: #fff;
  height: 60px;
  width: 60px;
  position: absolute;
  line-height: 60px;
  text-align: center;
  font-size: 2em;
  font-weight: 700;
  left: 50%;
  margin-left: -30px;
  top: -30px;
  background: #345060;
  -webkit-font-smoothing: antialiased
}
.month .event .article-event h3 {
  font-size: 1.8em;
  text-transform: uppercase;
  margin: 0 0 22px;
  font-family: Oswald, sans-serif;
  letter-spacing: .125em;
  font-weight: 700;
  line-height: 1.2em;
  color: #345060;
  -webkit-font-smoothing: antialiased
}
.month .event .article-event p {
  margin: 0 0 38px;
  font-size: 1.2em;
  color: #5f5a5a;
  line-height: 1.3em;
  -webkit-font-smoothing: antialiased
}
.month .event .article-event .link-article {
  display: inline-block;
  position: relative;
  padding: 20px 30px;
  font-size: 1.1em;
  font-weight: 400;
  line-height: 1em;
  text-align: center;
  font-family: Oswald, sans-serif;
  color: #fff;
  letter-spacing: .125em;
  background: #345060;
  -webkit-font-smoothing: antialiased
}
.month .event .article-event .link-article:hover {
  text-decoration: none;
  color: #fff;
  background: #22343f
}
@media (min-width:992px) {
  .month .event .article-event {
    padding: 70px 80px 50px
  }
}
.month .footer-month {
  padding: 100px 0;
  text-align: center;
  background: #345060;
  border-top-width: 5px;
  border-top-style: solid;
  border-top-color: #22343f
}
.month .footer-month .next-month-btn {
  font-size: 3em;
  text-transform: uppercase;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  font-family: Oswald, sans-serif;
  letter-spacing: .125em;
  color: #fff;
  line-height: 80px
}
.month .footer-month .next-month-btn .deco {
  vertical-align: bottom;
  display: inline-block;
  position: relative;
  margin-left: 30px;
  height: 80px;
  width: 80px;
  cursor: pointer;
  border: 2px solid #fff;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out
}
.month .footer-month .next-month-btn .deco:after {
  position: absolute;
  content: "";
  background: #fff;
  height: 2px;
  width: 30px;
  top: 28px;
  left: 22px;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out
}
.month .footer-month .next-month-btn .deco:before {
  position: absolute;
  content: "";
  background: #fff;
  height: 30px;
  width: 2px;
  top: 34px;
  left: 36px;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out
}
.month .footer-month .next-month-btn .deco:after, .month .footer-month .next-month-btn .deco:before {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg)
}
.month .footer-month .next-month-btn .deco:hover {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.month .footer-month .next-month-btn .deco:hover:after {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  top: 71px;
  left: 42px
}
.month .footer-month .next-month-btn .deco:hover:before {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  top: 42px;
  left: 71px
}
.month .footer-month .next-month-btn:hover {
  text-decoration: none
}
.month:nth-of-type(2n) .header-month {
  border-bottom-color: #0d2330
}
.month:nth-of-type(2n) .footer-month {
  background: #153b50;
  border-top-color: #0d2330
}
.month:nth-of-type(2n) .event .article-event .date {
  background: #153b50
}
.month:nth-of-type(2n) .event .article-event h3 {
  color: #153b50
}
.month:nth-of-type(2n) .event .article-event .link-article {
  background: #153b50
}
.month:nth-of-type(2n) .event .article-event .link-article:hover {
  background: #0d2330
}
.timeline {
  display: none;
  position: fixed;
  z-index: 100;
  bottom: -105px;
  left: 0;
  width: 100%;
  height: 100px;
  -webkit-transition: all .4s ease-in;
  -moz-transition: all .4s ease-in;
  -ms-transition: all .4s ease-in;
  -o-transition: all .4s ease-in;
  transition: all .4s ease-in;
  opacity: 0
}
.timeline.on {
  bottom: 0;
  opacity: 1
}
@media (min-width:1200px) {
  .timeline {
    display: block
  }
}
.timeline ul {
  list-style: none;
  padding: 0;
  width: 96%;
  margin: auto;
  height: 100px;
  text-align: center
}
.timeline ul:before {
  display: block;
  position: absolute;
  content: "";
  bottom: 30px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff
}
.timeline ul li {
  display: inline-block;
  text-align: center;
  line-height: 60px
}
@media (min-width:1350px) {
  .timeline ul li {
    margin: 0 6px
  }
}
@media (min-width:1500px) {
  .timeline ul li {
    margin: 0 10px
  }
}
.timeline ul li a {
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
  font-size: 1.2em;
  color: #fff;
  font-family: Oswald, sans-serif;
  letter-spacing: .125em;
  position: relative;
  line-height: 1em;
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid transparent;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out
}
.timeline ul li a.active-month {
  -moz-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  -o-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3)
}
.timeline ul li a:after {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  bottom: -22px;
  left: 50%;
  margin-left: -1px;
  height: 24px;
  background: #fff;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out
}
.timeline ul li a:active, .timeline ul li a:focus {
  text-decoration: none
}
.timeline ul li a:hover {
  color: #fff;
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid #fff
}
.timeline ul li a:hover:after {
  bottom: -35px
}