@font-face {
  font-family: 'Akkurat Light Pro';
  src: url('../assets/fonts/AkkLg_Pro_1.eot'); /* IE9 Compat Modes */
  src: url('../assets/fonts/AkkLg_Pro_1-.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../assets/fonts/AkkLg_Pro_1.woff') format('woff'), /* Modern Browsers */
       url('../assets/fonts/AkkLg_Pro_1.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../assets/fonts/AkkLg_Pro_1.svg#b5c01d1b960fd3c923f4c0466bcdd227') format('svg'); /* Legacy iOS */
  font-style:   normal; font-weight:  200; }
@font-face {
  font-family: 'Akkurat Pro';
  src: url('../assets/fonts/AkkBd_Pro_1.eot'); /* IE9 Compat Modes */
  src: url('../assets/fonts/AkkBd_Pro_1-.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../assets/fonts/AkkBd_Pro_1.woff') format('woff'), /* Modern Browsers */
       url('../assets/fonts/AkkBd_Pro_1.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../assets/fonts/AkkBd_Pro_1.svg#8e4ac6878de559e681f53263f7ebda33') format('svg'); /* Legacy iOS */
  font-style:   normal; font-weight:  700;}





@import url("http://hello.myfonts.net/count/32aa08");
html,
body,
p,
h1,
h2,
h3,
ul {
    margin: 0;
    padding: 0
}

html {
    box-sizing: border-box
}

*,
*:before,
*:after {
    box-sizing: inherit
}

ul {
    list-style: none !important
}

@font-face {
    font-family: 'Formular';
    src: url("../assets/fonts/32AA08_0_0.eot");
    src: url("../assets/fonts/32AA08_0_0-.eot#iefix") format("embedded-opentype"), url("../assets/fonts/32AA08_0_0.woff2") format("woff2"), url("../assets/fonts/32AA08_0_0.woff") format("woff"), url("../assets/fonts/32AA08_0_0.ttf") format("truetype");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: 'Formular';
    src: url("../assets/fonts/32AA08_1_0.eot");
    src: url("../assets/fonts/32AA08_1_0-.eot#iefix") format("embedded-opentype"), url("../assets/fonts/32AA08_1_0.woff2") format("woff2"), url("../assets/fonts/32AA08_1_0.woff") format("woff"), url("../assets/fonts/32AA08_1_0.ttf") format("truetype");
    font-weight: 400;
    font-style: normal
}

::-moz-selection {
    background-color: #000;
    color: #fff
}

::selection {
    background-color: #000;
    color: #fff
}

::-moz-selection {
    background-color: #000;
    color: #fff
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle
}

.show-for-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0)
}

.logo {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 100px;
    height: 100px
}

.logo .heydays-logo {
    -webkit-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)
}

.logo .heydays-logo:hover {
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
}

@media (min-width: 640px) {
    .logo {
        width: 200px;
        height: 200px
    }
}

.heydays-logo .letter {
    fill: #fff
}

.ginger {
    font-family: 'roboto', 'Helvetica Neue', 'Helvetica', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 8em;
    color: red;
    font-weight: 700;
    line-height: .74em;
    
}

.image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat
}

html {
    font-size: 100%
}

body {
    font-family: 'Formular', 'Helvetica Neue', 'Helvetica', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 300;
    color: #fff;
    font-size: 18px;
    line-height: 1.44em
}

@media (min-width: 640px) {
    body {
        font-size: 20px
    }
}

/*h1,*/
h2,
h3,
p,
ul,
li {
    font-weight: 300;
    font-size: 1em
}

a {
    color: #fff;
    text-decoration: none
}

html,
body {
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none
}

#page {
    position: relative;
    width: 100%;
    height: 100%
}

ul {
    padding: 2%
}

@media (min-width: 700px) {
    ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.footer,
.header {
    padding: 0;
    position: absolute;
    width: 100%;
    z-index: 10;
    -webkit-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
}

.header {
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: translate(0, -150px);
    transform: translate(0, -150px)
}

.header.visible {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.footer {
    bottom: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: translate(0, 150px);
    transform: translate(0, 150px)
}

.footer.visible {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.slider {
    opacity: 0;
    -webkit-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
}

.slider.visible {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.graphic-container {
    background-color: #000;
    width: 100%;
    height: 100%;
    z-index: 1
}

.slider,
.image,
.graphic-container,
.slide {
    width: 100%;
    height: 100%
}

.slider {
    overflow: hidden
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-perspective: 1000;
    background-color: #000
}

.slide img {
    -webkit-perspective: 1000
}

.slide.visible {
    z-index: 2;
    -webkit-transition: opacity .5s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity .5s cubic-bezier(0.4, 0, 0.2, 1)
}

.slide.next {
    z-index: 1
}

.slide.queued {
    z-index: -1;
    display: none
}

.lazyhide {
    opacity: 0;
    -webkit-transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1)
}

.lazyhide.lazyloaded {
    opacity: 1
}






.wiggler {
    font-size: 39px;
    font-weight: 900;
    color: red;
    width: 100%;
    /*padding-left: 24px;
    padding-top: 18px;
    text-align: center;*/
    position: fixed;
    bottom: 0;
    right: -50px;
    line-height: 2em;
   
   
}



h1 {
  color:red;
  display: inline-block;
  position: relative;
  -webkit-animation: fade 0.8s ease-in-out 1 forwards;
          animation: fade 0.8s ease-in-out 1 forwards;
}
h1::after {
  content: '';
  background: red;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-animation: swipe 0.8s ease-in-out 1 forwards;
          animation: swipe 0.8s ease-in-out 1 forwards;
  -webkit-transform-origin: left 50%;
          transform-origin: left 50%;
}

@-webkit-keyframes swipe {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: left 50%;
            transform-origin: left 50%;
  }
  50.001% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: right 50%;
            transform-origin: right 50%;
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: right 50%;
            transform-origin: right 50%;
  }
}

@keyframes swipe {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: left 50%;
            transform-origin: left 50%;
  }
  50.001% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: right 50%;
            transform-origin: right 50%;
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: right 50%;
            transform-origin: right 50%;
  }
}
@-webkit-keyframes fade {
  0% {
    color: transparent;
  }
  50% {
    color: transparent;
  }
  50.001% {
    color: white;
  }
  100% {
    color: white;
  }
}
@keyframes fade {
  0% {
    color: transparent;
  }
  50% {
    color: transparent;
  }
  50.001% {
    color: white;
  }
  100% {
    /*color: white;*/
  }
}


#noise {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0; left:0;
	z-index: 1;
	opacity: .1;
}



#download		{ position: absolute; top:20%; right:20px; text-align: right; z-index: 8; color;red }
#download.down		{ top:auto; bottom:180px; }

#infos			{ font-size: .8em; margin-top: 10px; margin-right: 4px;
					-webkit-transform: rotate(-90deg); -webkit-transform-origin: 100% 100%;
					-o-transform: rotate(-90deg); -o-transform-origin: 100% 100%;
					-moz-transform: rotate(-90deg); -moz-transform-origin: 100% 100%;
					transform: rotate(-90deg); transform-origin: 100% 100%}
#infos a		{ font-family: 'Akkurat Pro'; text-decoration: underline; color:#0d0d0d}
#infos a:hover	{ color:#3333ff; text-decoration: none}


#mat { 
       font-size: .8em; 
       margin: 0; font-style: normal; 
       font-weight: normal;
       font-family: 'Akkurat Pro'; 
       margin-top: 47px; 
       margin-bottom:4px
    }

			
#address  { font-weight: normal; 
            margin-top: 6px;
          } /*si pas lisible utiliser bold*/
 	




/*

html {
  text-align: center;
  height: 100%;
  background-color: lightblue;
}

body {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 10vmin;
}

*/














/*# sourceMappingURL=app.css.map */


/* Localized */