Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              html.no-js.loader
  body.menu_passive.loading
    noscript
      p Sorry, we use javascript
    header   
      nav
        #btn_menu.menu
          a(href="javascript:void(0)")
            span ☆  
            | FICHE TECHNIQUE
            span   ☆  
        #btn_bio.menu
          a(href="javascript:void(0)")
            span ☆   
            | MENU
            span   ☆ 
        #btn_access.menu
          a(href="javascript:void(0)")
            span ☆  
            | DOSSIER DE PRESSE
            span  ☆
        #btn_contact.menu
          a(href="javascript:void(0)")
            span ☆  
            | CONTACTS
            span   ☆
    #sns
      ul
        li
          a(href="https://www.facebook.com/ecrits.films.et.cinema/posts/1274025926098143?__tn__=-R" target="_new")
            img(src="https://www.lacor.info/film/manta_ray/img/icon_fb.png")
            
    #menu_all
      // 
      #bio_cont
        .mask
          .mask1
          .mask2
          .mask3
            .mask_cont.col__1
                p 
                span.fadein_item 
                  a(href="https://www.lacor.info/" target="_new") ACOR
                p.mask_small.mask_inline(style="line-height:0.8 !important;opacity:0.5") Association 
                   br
                   | des cinémas de l'ouest 
                   br
                   | pour la recherche
                   br
                   br
                   
                   
                span.fadein_item 
                  a(href="https://www.jour2fete.com/distribution/manta-ray" target="_new") Jour2fĂȘte
            .mask_cont.col__2 
              p.mask_top.mask_inline
                span.fadein_item 
                 a(href="https://www.lacor.info/film/manta_ray/texte/rabouan.html" style="font-size:0.8em")  ENTRE DEUX EAUX
                 br
                span.fadein_item 
                 a(href="https://www.lacor.info/film/manta_ray/texte/rabouan.html" style="font-size:0.8em")  [Sur la rive 
                 br
                 a(href="https://www.lacor.info/film/manta_ray/texte/rabouan.html" style="font-size:0.8em")  oĂč murmurent les trĂ©passĂ©s]
                .mask_bottom.fadein_item
                 p.mask_small.mask_inline par Cindy Rabouan
                 p.mask_small.mask_bottom.mask_inline  © ACOR 2019 
                 br
                 br
                span.fadein_item 
                 a(href="https://www.lacor.info/film/manta_ray/telechargements/index.html" style="letter-spacing:1px" target="new") Téléchargements
                 br
              

               
      // 
      #menu_cont
        .mask
          .mask1
          .mask2
          .mask3
            .mask_cont
              span.fadein_item
              span.mask_bottom.mask_tit Fiche technique
              br
              br
              span.fadein_item Un film de Aroonpheng Phuttiphong
              span.fadein_item ThaĂŻlande / France / Chine
              span.fadein_item 2018 ‱ fiction ‱ 1H45 
              span.fadein_item avec Wanlop Rungkumjad, Aphisit Hama, Rasmee Wayrana
              span.fadein_item Distributeur : Jour2fĂȘte
              span.fadein_item Sortie nationale : 24 juillet 2019
              span.fadein_item N° de visa : en cours, cf. site du distributeur ou allocine
              br
              span.fadein_item.resume.sp
                | PrĂšs d’une cĂŽte oĂč des rĂ©fugiĂ©s Rohingyas ont Ă©tĂ© retrouvĂ©s noyĂ©s, un jeune pĂȘcheur thaĂŻlandais trouve en pleine forĂȘt un homme blessĂ© et inconscient.

              span.pc Il lui porte secours et le soigne. L’étranger se rĂ©vĂšle ĂȘtre muet. Il le nomme Thongchai et lui offre son amitiĂ©.
                
              span.pc Un jour, le pĂȘcheur disparaĂźt mystĂ©rieusement. Thongchai va peu Ă  peu prendre sa place...
                br
                |       
      // 
      #access_cont
        .mask
          .mask1
          .mask2 
            object(data="https://drive.google.com/file/d/1QBUkF7W6t5m8D_4W7mUxw25TBIDx6-iP/preview")
            
          .mask3
            .mask_cont
              span.pc.fadein_item(style="font-size: 20px;") CONTACT PRESSE
              span.mask_tit
                | MAKNA PRESSE, Chloé Lorenzi
              span.fadein_item
                | info@makna-presse.com
              span.fadein_item TEL 
                a(href="tel:(33) 1 42 77 00 16") (33) 1 42 77 00 16
              span.fadein_item(style="margin-bottom:0px;")
                span.mask_tit PROJECTIONS DE PRESSE
                br
                br
                |             VENDREDI 07 JUIN 10:30
                br
                |             MARDI 11 JUIN 15:30
                br
                |             MERCREDI 26 JUIN 15:00
                br
                |             VENDREDI 12 JUILLET 10:30
                br
                br
                span(style="font-size: 1em;") CLUB MARBƒUF
                br
                span(style="font-size: 1em;") 38, rue MarbƓuf, 75008 PARIS
                br
                br
                span.fadein_item(style="color:hsla(59,52%,60%,1) ") Merci de confirmer
                br
                span.fadein_item Dossier de presse © Jour2fĂȘte 2019
                br 
                
      // 
      #contact_cont
        .mask
          .mask1
          .mask2
          .mask3
            .mask_cont.col__1
               span.fadein_item ACOR
               span.fadein_item
                span.mask_tit Soizig Le Dévéhat          
               span.fadein_item
                a(href="tel: +33 1 40 22 92 15")  +33 2 51 81 59 33
               span.fadein_item
                a(href="#") soizig.le.devehat@lacor.info
               br
               br
            .mask_cont.col__2
               span.fadein_item Jour2FĂȘte
               span.fadein_item
                span.mask_tit Églantine Stasiecki
                span.fadein_item
                a(href="#") eglantine.stasiecki@jour2fete.com
               span.fadein_item
                span.mask_tit BenoĂźt Perrier 
                span.fadein_item
                a(href="#") benoit.perrier@jour2fete.com
               span.fadein_item
                | 9 rue Ambroise Thomas
               span.fadein-item
                | 75009 PARIS
               span.fadein_item
                a(href="tel: +33 1 40 22 92 15")  +33 1 40 22 92 15
               br
            //.mask_cont
               span.cr COPYRIGHT © ACOR/
      // 
    main#fullpage
      section#main.section(role="main")
        #mainVisual
          .scene
            #loader
            .layer.is-front(data-depth="1.00")
              #title
              #title_manta
              #title_ray
              
            .layer.is-front(data-depth="1.00")
                  
            .layer(data-depth="0.50")
              #head_bg                
                object.mr(data="https://s.codepen.io/cathbailh/debug/e651076b48c04ee3dae0be9987ea9a7c")
                
                
            .layer(data-depth="0.90")
              #arrow
                p.arrow.scroller
                  img(src="https://www.lacor.info/film/manta_ray/img/scroll.png" alt="")
          #background-hack01.layer.is-front(data-depth="1.00")
      // 
      section#gallery01.section
        // 
        #gallery_left01
          .mask
            .mask1
            .mask2
            .mask3
              .mask_cont
                p
                  span.prix Grand Prix du jury, Festival International du Premier Film d'Annonay 2019
                  br
                  span.prix Mention spéciale du Jury Jeunesse, Festival du Film de Cabourg 2019
                  br
                  
                  span.prix Grand Prix Orizzonti, Festival de Venise 2018 
                  br
                  span.prix Grand Prix du Festival International de Mumbai (Inde) 2018
                  br
                  span.prix Sélection Officielle Toronto 2018
                  br
                  br
                  .psout Le film est soutenu par l' 
                   span.sout ACOR 
                   |(Association des cinémas de l'ouest pour la recherche) et par le 
                   span.sout GNCR 
                   |(Groupement national des cinémas de recherche)
                p.credit
                  | Photo @ Jour2fĂȘte 2019
                 
        // 
      // 
      section#gallery02.section
        // 
        #gallery_left02
          .mask
            .mask1
            .mask2
            .mask3
              .mask_cont
                p
                  | Ce rĂ©cit se construit au fil d’une relation asymĂ©trique renvoyant Ă  une Ă©trange variation autour de l’économie du don et du contre-don. Il interroge des notions telles que l’amitiĂ©, le fait de « prendre soin », la parole, la rĂ©silience.
                .cit 
                  a(href="https://www.lacor.info/film/manta_ray/texte/rabouan.html") Entre deux eaux
                  
                .credit
                  | Photo @ Jour2fĂȘte, 2019
        // 
      section#gallery03.section
        // 
        #gallery_left03
          .mask
            .mask1
            .mask2
            .mask3
              .mask_cont
                p
                  |Si la survie d’un homme laissĂ© pour mort a le pouvoir de changer le cours d’une autre vie, c’est que ce film aborde en filigrane une tragĂ©die bien rĂ©elle, celle de l’exode impossible des Rohingya vers les rives thaĂŻlandaises depuis l'État de Rakhine, anciennement État d'Arakan, leur berceau en terres birmanes depuis des siĂšcles. Phuttiphong Aroonpheng leur dĂ©dicace ce film.
                .cit 
                  a(href="https://www.lacor.info/film/manta_ray/texte/rabouan.html") Entre deux eaux
                p.credit
                  | Photo @ Jour2fĂȘte, 2019
      // 
      section#gallery04.section
        // 
        #gallery_left04
          .mask
            .mask1
            .mask2
            .mask3
              .mask_cont
                p
                  | À l’instar de ses pairs cinĂ©astes, Phuttiphong Aroonpheng manie le medium cinĂ©matographique comme une table spirite et livre un film-sĂ©pulcre dĂ©diĂ© aux Rohingya : de l’image qui masque au son qui creuse celle-ci Ă  travers une partition sonore sidĂ©rante, il offre aux trĂ©passĂ©s, au peuple des limbes, aux morts sans sĂ©pulture, une zone de revenance qui Ă  dĂ©faut de rĂ©silience, les fait exister de nouveau pour mieux les laisser repartir d’entre les eaux.
                .cit 
                  a(href="https://www.lacor.info/film/manta_ray/texte/rabouan.html") Entre deux eaux
                 
                p.credit
                  | Photo @ Jour2fĂȘte, 2019
                  
  
    script(src="https://www.lacor.info/film/manta_ray/texte/js/main_get_method.min.js")

            
          
!
            
                //CATH

$mq--mobile = 320px
$mq--tablet = 600px
$mq--desktop = 1280px

    
// breakpoints (not used here for the moment) (eg  @media break-S)
break-S           = "screen and (max-width $mq--mobile)"
break-M           = "screen and (min-width $mq--tablet)"
break-L           = "screen and (min-width $mq--desktop)"

// font-size
font($scale-min, $scale-max) 
  font-size $scale-min
  @media screen and (min-width $mq--mobile)
    font-size "calc(%s + %s * ((100vw - %s) / %s))" % ($scale-min unit($scale-max - $scale-min, '') $mq--mobile unit($mq--desktop - $mq--mobile, ''))
  
  @media screen and (min-width $mq--desktop)
    font-size $scale-max

*,
*::after,
*::before 
	box-sizing border-box
::selection 
 background $bg--color-gall
 /* Safari, chrome */

::-moz-selection 
 background $bg--color-gall
 /* Firefox */

$bg--color=linear-gradient(to bottom, hsl(210,29%,57%)1%, hsl(216,32%,31%) 30%, hsl(220,47%,18%) 70%, hsla(225,50%,15%,1) 100%)
$bg--color-hack=linear-gradient(hsl(208,39%,60%), hsla(211,37%,45%,1), hsla(220,52%,17%,1),hsla(223,50%,10%,1), hsl(225,48%,5%) 100%)

$bg--color-gall=linear-gradient(to bottom, hsl(210,29%,57%)1%, hsl(216,32%,31%) 30%, hsl(220,47%,18%) 70%, hsla(225,50%,15%,1) 100%)

$bg--color-gall-transp=linear-gradient(to right, hsla(225,50%,5%,0.8) 1%, hsla(225,50%,5%,0.5)   30%, hsla(225,50%,15%,0.4)  70%, hsla(225,50%,15%,0)  100%)

$bg--img-title= url(https://www.lacor.info/film/manta_ray/img/manta_ray_title.png) 
$bg--img-manta-title=url(https://www.lacor.info/film/manta_ray/img/manta_title.png)  
$bg--img-ray-title=url(https://www.lacor.info/film/manta_ray/img/ray_title.png)   

$bg--img-menu= url(https://www.lacor.info/film/manta_ray/img/manta_ray_08.jpg) 
$bg--img-contact= url(https://www.lacor.info/film/manta_ray/img/manta_ray_09.jpg)
$bg--img-desc= url(https://www.lacor.info/film/manta_ray/img/manta_ray_01.jpg)

$bg--img-01= url(https://www.lacor.info/film/manta_ray/img/manta_ray_05.jpg)
$bg--img-02= url(https://www.lacor.info/film/manta_ray/img/manta_ray_07.jpg)
$bg--img-03= url(https://www.lacor.info/film/manta_ray/img/manta_ray_13.jpg)
$bg--img-04= url(https://www.lacor.info/film/manta_ray/img/manta_ray_16.jpg)

$font--chelsea='Chelsea Market', cursive
$font--dosis='Dosis', sans-serif

$color--text=ivory
$color--title=rgba(ivory,0.1)
$color--title-sp=rgba(ivory,0.3)
$color--border=rgba(ivory,0.7)
$color--link=hsla(59,52%,60%,1)

//gallery
$font--size-gall=1.3em
$marg--l=70px
$marg--r=40px


$z--loading=200
$z--load=4

html
 overflow hidden

html,
body 
 height 100%
 background-color $bg--color-gall

body 
 background-image $bg--color
 color $color--text
 font(11px, 20px)
 line-height 1.4
 
body,
header,
nav,
#main,
#mainVisual 
 position relative
 //overflow hidden
 font-family $font--dosis
 font-weight 200

/* Page Loader */
.loading:before 
	content ""
	position fixed
	z-index 100000
	top 0
	left 0
	width 100%
	height 100%
	background $bg--color
 
.loading:after 
	content ""
	position fixed
	z-index 100000
	top 50%
	left 50%
	width 60px
	height 60px
	margin -30px 0 0 -30px
	pointer-events none
	border-radius 50%
	opacity 0.4
	background $color--text
	animation:loaderAnim 0.7s linear infinite alternate forwards
 
@keyframes loaderAnim 
	to 
		opacity 1
		transform scale3d(0.5, 0.5, 1)

.psout
 font-size 0.8em
 
.sout
 color $color--link
 font-weight 400
 
.prix
 &:before
  content '✭ '
  color $color--link
 
.pc 
 display block

.sp 
 display none

a
 text-decoration none 
 color $color--link 
 
.cit
 position relative
 padding-right 20px
 padding-top 20px
 display block
 float right
 text-align right
 a
  color $color--text
  text-decoration none
  &:hover
   color $color--link
 &:after
  opacity 0.5
  content '\A par Cindy Rabouan © ACOR 2019'
  white-space pre
  font-size 0.8em
  color $color--text
 
 
header 
 background-color $bg--color-gall
 width 100%
 //height:40px
 
iframe, object
 width 80%
 z-index -1
 position absolute
 top 45%
 left 50%
 transform translate(-50%,-50%)
 height 80vh
 overflow hidden 
 

 

/*FILM*/ 
.svg-line 
 z-index 1

#fullpage 
 height 100%

#main 
 height 100%

#mainVisual 
 position relative
 height 100%

#mainVisual > .scene 
 height 100%

#loader 
 position fixed
 z-index 5
 top 0
 right 0
 width 100%
 height 100%
 background-image $bg--color 
 animation:change-bg 5.5s linear forwards 1
 
 @keyframes change-bg
  0%
   filter contrast(1.2)
  
  100%
   filter contrast(0.9)
 

.is-loaded #loader 
 transition transform 0.9s
 transform translate(100%, 0)


/**/
.section 
 position relative

#mainVisual > .scene > .layer 
 position absolute
 top 0
 left 0
 width 100%
 height 100%
 
#mainVisual > .scene > .layer.is-front 
 z-index 10

/*#mainVisual h2
  opacity 0
  font-size 24px
  
  letter-spacing 5px
  position absolute
  left 0
  right 0
  top 30%
  text-align center
  transition all .6s ease-in-out*/


#mainVisual h3 
 opacity 0
 font-size 1.2em
 letter-spacing 3px
 position absolute
 left 0
 right 0
 top 81%
 text-align center
 transition all 0.6s ease-in-out
 text-shadow 0px 0px 4px rgba(0, 0, 0, 0.8)

#mainVisual h4 
 opacity 0
 border-top $color--border 1px solid
 width 72px
 position absolute
 left 0
 right 0
 bottom 36px
 margin 0 auto
 text-align center
 transition all 0.6s ease-in-out
 transform rotate(90deg)

#gallery01 
 background-color $bg--color-gall
 width 100vw
 height 100vh
  

#head_bg img 
 max-width 52%
 position absolute
 top 0 !important
 right 0 !important
 bottom 0 !important
 left 0 !important
 margin auto auto
 z-index 0
 opacity 0.35
 filter blur(3px)
 animation:manta 80s cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate 
 @keyframes manta
  5%,45%,55%,65%,75%,95%
   filter blur(5px)
  15%,25%,35%,65%,75%,85%
   filter blur(6px)   
  10%,10%,30%,40%,50%,60%,70%,80%, 90%,100%
   filter blur(3px)
   
   
#head_bg h1
 color $color--border
 display block
 position absolute
 left 0
 top 0
 margin-left 50%
 margin-top 45%
 transform translate(-50%,-50%)
 z-index 0 
 text-align center
 font-size 80px
 font-family $font--chelsea
 filter drop-shadow(0 0 1px rgba(255, 200, 0, .3))

#arrow p
  position absolute
  display block
  width 50px
  height 50px
  left 50%
  top 50%
  color $color--border
  text-align center
  transform translate(-50%,400%)
  z-index 0

.arrow
  opacity 0
  animation:bouge 17s ease-in forwards 1
  
@keyframes bouge
 100%
  transform translate(-50%,400%)
  opacity 0.5

.scroller 
  width 60px
  height 60px
  border-radius 50% 
  img 
   width 60px !important
   opacity 0.9 
   filter blur(0)
   animation:turn 5s linear infinite
   
 @keyframes turn
   to
    transform rotate(360deg)
   50%
    opacity .3
    filter blur(1px)
  
  
#background-hack01 
 z-index -1
 background-color $bg--color-gall
 background-image $bg--color-hack
 background-repeat no-repeat
 background-position center center
 background-size cover !important
 position fixed
 top 0
 left 0
 right 0
 bottom 0


 
 
//button

/*.menu a span.menu_name
  position absolute
  top -6px
*/
#btn_menu a,
#btn_bio a,
#btn_access a,
#btn_contact a 
 transition all 0.4s ease
 color $color--text

#btn_menu a.on,
#btn_bio a.on,
#btn_access a.on,
#btn_contact a.on
 font-size .8em
 transition all 0.4s ease
 color $color--link
 
#btn_access a.on 
 right -30px


.menu a span 
 font-size 1.2em
 opacity 0
 vertical-align middle
 transition all 0.4s ease-in-out

.menu a span.active 
 opacity 0.5



//menus
.menu a 
 position fixed
 font-size 12px
 letter-spacing 2px
 background transparent
 border none
 outline none
 cursor pointer
 z-index 100
 text-align center
 padding 0px
 text-decoration none 
 transition transform 0.3s 1s
 
#btn_bio a 
 top 30px
 right 0px
 left 0px
 margin 0 auto
 max-width 30%
 transform translate(0, -80px)

#btn_menu a 
 bottom 0px
 top 0px
 left 25px
 max-height 50%
 margin auto
 -ms-writing-mode tb-rl
 -webkit-writing-mode vertical-rl
 writing-mode vertical-rl
 transform translate(-80px, 0)

#btn_access a 
 top 0
 bottom 0
 right -40px
 height 0
 margin auto
 transform rotate(270deg) translate(0, 80px)

#btn_contact a 
 bottom 20px
 right 0px
 left 0px
 max-width 30%
 margin 0 auto
 transform translate(0, 80px)

#sns 
 position fixed
 bottom 40px
 right 40px
 z-index 100
 transform translate(0, 80px)
 transition transform 0.3s 1s

.is-loaded #btn_menu a,
.is-loaded #btn_bio a,
.is-loaded #btn_contact a,
.is-loaded #sns 
 transform translate(0, 0)

.is-loaded #btn_access a 
 transform rotate(270deg) translate(0, 0)

#wrap 
 position relative
 width 400px
 height 300px
 margin 30px auto 0
 background linear-gradient(0deg, $color--text 2px, rgba(0, 0, 0, 0) 2px),
  linear-gradient(90deg, $color--text 2px, rgba(0, 0, 0, 0) 2px),
  linear-gradient(0deg, rgba(255, 255, 255, 0.298039) 1px, rgba(0, 0, 0, 0) 1px),
  linear-gradient(
   90deg,
   rgba(255, 255, 255, 0.298039) 1px,
   rgba(0, 0, 0, 0) 1px
  ),
  rgb(34, 102, 153)
 background-position -2px -2px, -2px -2px, -1px -1px, -1px -1px
 background-origin padding-box
 background-clip border-box
 background-size 100px 100px, 100px 100px, 20px 20px, 20px 20px


/***click-effect***/
/*menu*/
#menu_cont .mask1 
 position absolute
 top 0
 left 0
 width 100%
 height 100%
 background-image $bg--color
 z-index 6
 transform translate3d(-100%, 0, 0)
 transition all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)

//FICHE TECHNIQUE
#menu_cont .mask2 
 width 50%
 height 100%
 position absolute
 top 0
 left 0
 background-color $bg--color-gall 
 background-image $bg--img-desc
 background-repeat no-repeat
 background-size cover
 background-position 70% center
 z-index 6
 opacity 1
 transform translate3d(-100%, 0, 0)
 transition all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1)

#menu_cont .mask3 
 width 50%
 height 100%
 position absolute
 top 0
 left 0
 background-color $bg--color-gall
 z-index 7
 opacity 1
 transition all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100%, 0, 0)

#menu_cont .mask3 .mask_cont 
 position absolute
 top 50%
 transform translateY(-50%)
 margin 0px $marg--r 0 $marg--l
 padding 0px
 
 font-size 1em
 //white-space nowrap
 .resume
  text-align justify

#menu_cont .mask3 .mask_cont .fadein_item 
 display block
 transform translate3d(-100px, 0, 0) skewX(-30deg)
 transition all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
 opacity 0

#menu_cont .mask3 .mask_cont .fadein_item:nth-of-type(1) 
 transition-delay 0.55s

#menu_cont .mask3 .mask_cont .fadein_item:nth-of-type(2) 
 transition-delay 0.6s

#menu_cont .mask3 .mask_cont .fadein_item:nth-of-type(3) 
 transition-delay 0.65s

#menu_cont .mask3 .mask_cont .fadein_item:nth-of-type(4) 
 transition-delay 0.7s

#menu_cont .mask3 .mask_cont .fadein_item:nth-of-type(5) 
 transition-delay 0.75s

#menu_cont .mask3 .mask_cont .fadein_item:nth-of-type(6) 
 transition-delay 0.8s

#menu_cont .mask3 .mask_cont .fadein_item:nth-of-type(7) 
 transition-delay 1.85s

#menu_cont .mask3 .mask_cont .fadein_item:nth-of-type(8) 
 transition-delay 1.9s

#menu_cont.is-visible .mask1 
 transform translate3d(0, 0, 0)

#menu_cont.is-visible .mask2 
 transform translate3d(100%, 0, 0)

#menu_cont.is-visible .mask3 
 transform translate3d(0, 0, 0)

#menu_cont.is-visible .mask3 .mask_cont .fadein_item 
 transform translate3d(0, 0, 0) skewX(0)
 opacity 1


/*DOSSIER DE PRESSE */
#access_cont .mask1 
 position fixed
 top 0
 right 0
 background-image $bg--color-hack
 z-index 6
 width 100%
 height 100%
 transform translate3d(100%, 0, 0)
 transition all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)

#access_cont .mask2 
 width 50%
 height 100%
 position absolute
 top 0
 right 0
 z-index 6
 opacity 1
 transform translate3d(100%, 0, 0)
 transition all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1)
 object
  width 70%
  max-width 420px
  height 72vh
  overflow-x hidden
  max-height 600px
  position absolute
  transform translate(-50%,-50%)
  top 50%
  left 55%

#access_cont .mask3 
 width 50%
 height 100%
 position absolute
 top 0
 right 0
 background-color $bg--color-gall
 z-index 7
 opacity 1
 transition all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(100%, 0, 0) 

#access_cont .mask3 .mask_cont 
 position absolute
 top 50%
 transform translateY(-50%)
 margin 0px 100px 0 100px
 padding 0px
 letter-spacing 2px
 line-height 25px
 
 font-size 14px

#access_cont .mask3 .mask_cont .fadein_item 
 display block
 transform translate3d(100px, 0, 0) skewX(-30deg)
 transition all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
 opacity 0

#access_cont .mask3 .mask_cont .fadein_item:nth-of-type(1) 
 transition-delay 0.55s

#access_cont .mask3 .mask_cont .fadein_item:nth-of-type(2) 
 transition-delay 0.6s

#access_cont .mask3 .mask_cont .fadein_item:nth-of-type(3) 
 transition-delay 0.65s

#access_cont .mask3 .mask_cont .fadein_item:nth-of-type(4) 
 transition-delay 0.7s

#access_cont .mask3 .mask_cont .fadein_item:nth-of-type(5) 
 transition-delay 0.75s

#access_cont .mask3 .mask_cont .fadein_item:nth-of-type(6) 
 transition-delay 0.8s

#access_cont.is-visible .mask1 
 transform translate3d(0, 0, 0)

#access_cont.is-visible .mask2 
 transform translate3d(-100%, 0, 0)

#access_cont.is-visible .mask3 
 transform translate3d(0, 0, 0)

#access_cont.is-visible .mask3 .mask_cont .fadein_item 
 transform translate3d(0, 0, 0) skewX(0)
 opacity 1
 margin-bottom 20px


/*MENU*/
#bio_cont .mask1 
 opacity 0
 margin 0 0 0 0
 position fixed
 top 0
 right 0
 bottom 0
 left 0
 background-image $bg--color
 z-index 6
 transition opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)

#bio_cont .mask2 
 position fixed
 bottom 0
 left 0
 width 100%
 height 50%
 z-index 6
 transform translate3d(0, 100%, 0)
 transition all 0.75s cubic-bezier(0.165, 0.84, 0.44, 1)
 background-color $bg--color-gall

//MENU
#bio_cont .mask2:before 
 content " "
 display block
 width 100%
 height 100%
 position absolute
 top 0
 left 0
 background-color $bg--color-gall
 background-image $bg--img-menu
 background-repeat no-repeat
 background-size 100% auto
 background-position right top
 opacity 0
 transition all 1.5s ease 1s

#bio_cont .mask3 
 position fixed
 top 0
 left 0
 width 100%
 height 50%
 background-color $bg--color-gall
 z-index 7
 opacity 1
 transform translate3d(0, -100%, 0)
 transition all 0.75s cubic-bezier(0.165, 0.84, 0.44, 1)

#bio_cont .mask3 .mask_cont 
 position absolute
 top 50%
 transform translateY(-50%)
 display inline-block
 margin 0 100px
 padding 0px 
 font-size 1.3em
 letter-spacing 0
 
.col__1
 width 50%
 left 0
 
.col__2
 width 50%
 left 50%


#bio_cont .mask3 .mask_cont .fadein_item 
 display block
 transition all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(0, -80px, 0) skewX(-30deg)
 opacity 0

#bio_cont .mask3 .mask_cont .fadein_item:nth-of-type(1) 
 transition-delay 0.55s

#bio_cont .mask3 .mask_cont .fadein_item:nth-of-type(2) 
 transition-delay 0.6s

#bio_cont .mask3 .mask_cont .fadein_item:nth-of-type(3) 
 transition-delay 0.65s

#bio_cont .mask3 .mask_cont .fadein_item:nth-of-type(4) 
 transition-delay 0.7s

#bio_cont .mask3 .mask_cont .fadein_item:nth-of-type(5) 
 transition-delay 0.75s

#bio_cont .mask3 .mask_cont .fadein_item:nth-of-type(6) 
 transition-delay 0.8s

#bio_cont.is-visible .mask1 
 opacity 1

#bio_cont.is-visible .mask2 
 transform translate3d(0, 0, 0)

#bio_cont.is-visible .mask2:before 
 opacity 1

#bio_cont.is-visible .mask3 
 transform translate3d(0, 0, 0)

#bio_cont.is-visible .mask3 .mask_cont .fadein_item 
 transform translate3d(0, 0, 0) skewX(0)
 opacity 1


/*contact*/
#contact_cont .mask1 
 opacity 0
 margin 0 0 0 0
 position fixed
 top 0
 right 0
 bottom 0
 left 0
 background-image $bg--color
 z-index 1
 transition opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)

//CONTACTS
#contact_cont .mask2 
 position fixed
 width 100%
 height 50%
 top 0
 left 0
 background-image $bg--img-contact
 background-repeat no-repeat
 background-size cover
 background-position center bottom
 z-index 6
 opacity 1
 transform translate3d(0, -100%, 0)
 transition all 0.75s cubic-bezier(0.165, 0.84, 0.44, 1)

#contact_cont .mask3 
 position fixed
 bottom 0
 left 0
 width 100%
 height 50%
 background-color $bg--color-gall
 z-index 7
 opacity 1
 transform translate3d(0, 100%, 0)
 transition all 0.75s cubic-bezier(0.165, 0.84, 0.44, 1)

#contact_cont .mask3 .mask_cont 
 width 100%
 position absolute
 top 50%
 transform translateY(-50%)
 margin 0 -25%
 padding 0px 
 font-size 1.2em
 line-height 1.6
 text-align center

#contact_cont .mask3 .mask_cont .fadein_item 
 display block
 transition all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(0, 80px, 0) skewX(-30deg)
 opacity 0

#contact_cont .mask3 .mask_cont .fadein_item:nth-of-type(1) 
 transition-delay 0.55s

#contact_cont .mask3 .mask_cont .fadein_item:nth-of-type(2) 
 transition-delay 0.6s

#contact_cont .mask3 .mask_cont .fadein_item:nth-of-type(3) 
 transition-delay 0.65s

#contact_cont .mask3 .mask_cont .fadein_item:nth-of-type(4) 
 transition-delay 0.7s

#contact_cont .mask3 .mask_cont .fadein_item:nth-of-type(5) 
 transition-delay 0.75s

#contact_cont .mask3 .mask_cont .fadein_item:nth-of-type(6) 
 transition-delay 0.8s

#contact_cont.is-visible .mask1 
 opacity 1

#contact_cont.is-visible .mask2 
 transform translate3d(0, 0, 0)

#contact_cont.is-visible .mask3 
 transform translate3d(0, 0, 0)

#contact_cont.is-visible .mask3 .mask_cont .fadein_item 
 transform translate3d(0, 0, 0) skewX(0)
 opacity 1


/**/
/*Gallerie*/
#gallery_left01 .mask1 
 position absolute
 top 0
 left 0
 width 100%
 height 100%
 background-image $bg--color
 z-index 6
 transition all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100%, 0, 0)

#gallery_left01 .mask2 
 width 50%
 height 100%
 position absolute
 top 0
 left 0
 background-image $bg--img-01 
 background-repeat no-repeat
 background-size cover
 background-position 35% center
 z-index 6
 transition opacity 0.5s ease,
 transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1)
 opacity 0.5s ease
 transform translate3d(-100%, 0, 0)
 opacity 0

#gallery_left01 .mask3 
 width 50%
 height 100%
 position absolute
 top 0
 left 0
 background-color $bg--color-gall
 z-index 7
 opacity 1
 transition all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100%, 0, 0)

#gallery_left01 .mask3 .mask_cont 
 position absolute
 top 50%
 padding 0
 
 font-size $font--size-gall
 margin 0 $marg--r 0 $marg--l
 line-height 1.6
 // opacity 0
 transition all 1.25s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100px, -50%, 0) skewX(-30deg)
 transition-delay 0.7s

#gallery_left01 .mask3 .mask_cont p.credit 
 padding-top 20px
 padding-right 20px
 line-height 20px
 font-size 0.7em
 color $color--link
 opacity 0.6


#gallery01.active #gallery_left01 .mask1 
 transform translate3d(0, 0, 0)
 opacity 1

#gallery01.active #gallery_left01 .mask2 
 transform translate3d(100%, 0, 0)
 opacity 1

#gallery01.active #gallery_left01 .mask3 
 transform translate3d(0, 0, 0)
 opacity 1

#gallery01.active #gallery_left01 .mask3 .mask_cont 
 transform translate3d(0, -50%, 0) skewX(0)
 opacity 1


/**/
#gallery_left02 .mask1 
 position absolute
 top 0
 left 0
 width 100%
 height 100%
 background-image $bg--color
 z-index 6
 transition all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100%, 0, 0)

#gallery_left02 .mask2 
 width 50%
 height 100%
 position absolute
 top 0
 left 0
 background-image $bg--img-02
 background-repeat no-repeat
 background-size cover
 background-position 30% center
 z-index 6
 transition opacity 0.5s ease,
 transition transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1),
 opacity 0.5s ease
 transform translate3d(-100%, 0, 0)
 opacity 0

#gallery_left02 .mask3 
 width 50%
 height 100%
 position absolute
 top 0
 left 0
 background-color $bg--color-gall
 z-index 7
 opacity 1
 transition all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100%, 0, 0)

#gallery_left02 .mask3 .mask_cont 
 position absolute
 top 50%
 margin 0px 50px 0 100px
 padding 0px
 font-size  $font--size-gall
 margin 0 $marg--r 0 $marg--l
 line-height 1.6
 opacity 0
 transition all 1.25s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100px, -50%, 0) skewX(-30deg)
 transition-delay 0.7s

.credit 
 position absolute
 bottom -7vh
 right 0
 padding-right 20px
 line-height 20px
 font-size 0.7em
 color $color--link
 text-align right
 opacity 0.6

#gallery02.active #gallery_left02 .mask1 
 transform translate3d(0, 0, 0)
 opacity 1

#gallery02.active #gallery_left02 .mask2 
 transform translate3d(100%, 0, 0)
 opacity 1

#gallery02.active #gallery_left02 .mask3 
 transform translate3d(0, 0, 0)
 opacity 1

#gallery02.active #gallery_left02 .mask3 .mask_cont 
 transform translate3d(0, -50%, 0) skewX(0)
 opacity 1


/**/
#gallery_left03 .mask1 
 position absolute
 top 0
 left 0
 width 100%
 height 100%
 background-image $bg--color
 z-index 6
 transition all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100%, 0, 0)

#gallery_left03 .mask2 
 width 50%
 height 100%
 position absolute
 top 0
 left 0
 background-image $bg--img-03
 background-repeat no-repeat
 background-size cover
 background-position 70% center
 z-index 6
 transition opacity 0.5s ease,
 transition transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1),
  opacity 0.5s ease
 transition transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1),
  opacity 0.5s ease, -webkit-transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100%, 0, 0)
 opacity 0

#gallery_left03 .mask3 
 width 50%
 height 100%
 position absolute
 top 0
 left 0
 background-color $bg--color-gall
 z-index 7
 opacity 1
 transition all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100%, 0, 0)

#gallery_left03 .mask3 .mask_cont 
 position absolute
 top 50%
 margin 0px 50px 0 100px
 padding 0px
 
 font-size  $font--size-gall
 margin 0 $marg--r 0 $marg--l
 line-height 1.6
 opacity 0
 transition all 1.25s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100px, -50%, 0) skewX(-30deg)
 transition-delay 0.7s



#gallery03.active #gallery_left03 .mask1 
 transform translate3d(0, 0, 0)
 opacity 1

#gallery03.active #gallery_left03 .mask2 
 transform translate3d(100%, 0, 0)
 opacity 1

#gallery03.active #gallery_left03 .mask3 
 transform translate3d(0, 0, 0)
 opacity 1

#gallery03.active #gallery_left03 .mask3 .mask_cont 
 transform translate3d(0, -50%, 0) skewX(0)
 opacity 1

 
/**/
#gallery_left04 .mask1 
 position absolute
 top 0
 left 0
 width 100%
 height 100%
 background-image $bg--color
 z-index 6
 transition all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100%, 0, 0)

#gallery_left04 .mask2 
 width 50%
 height 100%
 position absolute
 top 0
 left 0
 background-image $bg--img-04
 background-repeat no-repeat
 background-size cover
 background-position 20% top
 z-index 6
 transition opacity 0.5s ease,
 transition transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1),
  opacity 0.5s ease
 transition transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1),
  opacity 0.5s ease, -webkit-transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100%, 0, 0)
 opacity 0

#gallery_left04 .mask3 
 width 50%
 height 100%
 position absolute
 top 0
 left 0
 background-color $bg--color-gall
 z-index 7
 opacity 1
 transition all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100%, 0, 0)

#gallery_left04 .mask3 .mask_cont 
 position absolute
 top 50%
 padding 0px
 
 font-size  $font--size-gall
 margin 0 $marg--r 0 $marg--l
 line-height 1.6
 opacity 0
 transition all 1.25s cubic-bezier(0.165, 0.84, 0.44, 1)
 transform translate3d(-100px, -50%, 0) skewX(-30deg)
 transition-delay 0.7s

#gallery04.active #gallery_left04 .mask1 
 -webkit-transform translate3d(0, 0, 0)
 transform translate3d(0, 0, 0)
 opacity 1

#gallery04.active #gallery_left04 .mask2 
 -webkit-transform translate3d(100%, 0, 0)
 transform translate3d(100%, 0, 0)
 opacity 1

#gallery04.active #gallery_left04 .mask3 
 -webkit-transform translate3d(0, 0, 0)
 transform translate3d(0, 0, 0)
 opacity 1

#gallery04.active #gallery_left04 .mask3 .mask_cont 
 -webkit-transform translate3d(0, -50%, 0) skewX(0)
 transform translate3d(0, -50%, 0) skewX(0)
 opacity 1


/**/
#office_map 
 width 100%
 height 100%

.mask_tit 
 box-shadow 20px 38px 34px -26px hsla(0,0%,0%,.2)
 border-radius  255px 15px 225px 15px/15px 225px 15px 255px 
 border 1px solid $color--border
 padding 2px 10px 2px
 margin-right 10px
 margin-bottom 20px
 font-size 1em
 line-height 2

.mask_big 
 font-size 1.5em
 font-weight 400

.mask_small 
 font-size 0.8em

.mask_small02 
 font-size 10px
 line-height 18px

.mask_bottom 
 margin-bottom 10px

.mask_top 
 margin-top 40px

.mask_float 
 float left

.mask_center 
 text-align center

.mask_link 
 color #ce9e6

.mask_inline 
 display inline !important

a[href^="tel:"] 
 cursor default
 color $color--link

a[href^="mail:"] 
 cursor default
 color $color--link
 
 
/***sns***/
#sns ul li 
 float left
 margin-left 20px
 list-style none

#sns ul li a img 
 height 15px
 width auto
 list-style none
 opacity 0.2


/*footer
.cr 
  position absolute
  display block
  width 100%
  text-align center
  color #555
  font-size 1em
  left 0
  bottom 1vh !important*/ 


/*badge*/
#badge 
 opacity 0
 -webkit-transition all 0.6s ease-in-out 1.6s
 transition all 0.6s ease-in-out 1.6s


#cssda-badge 
 /* monogram position here */
 position absolute
 top 45px
 right 120px
 /* ––– */
 width 90px
 height 90px
 border-radius 90px
 background #ededed
 -webkit-transition all 0.25s cubic-bezier(0.615, 0.19, 0.305, 0.91)
 -moz-transition all 0.25s cubic-bezier(0.615, 0.19, 0.305, 0.91)
 transition all 0.25s cubic-bezier(0.615, 0.19, 0.305, 0.91)
 cursor pointer


/* Generated with Bounce.js */
@keyframes bounce 
 0% 
  transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 3.4% 
  transform matrix3d(1.032, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 4.7% 
  transform matrix3d(1.045, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 6.81% 
  transform matrix3d(1.066, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 9.41% 
  transform matrix3d(1.088, 0, 0, 0, 0, 1.117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 10.21% 
  transform matrix3d(1.094, 0, 0, 0, 0, 1.123, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 13.61% 
  transform matrix3d(1.112, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 14.11% 
  transform matrix3d(1.114, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 17.52% 
  transform matrix3d(1.121, 0, 0, 0, 0, 1.124, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 18.72% 
  transform matrix3d(1.121, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 21.32% 
  transform matrix3d(1.12, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 24.32% 
  transform matrix3d(1.115, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 25.23%
  transform matrix3d(1.113, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 29.03%
  transform matrix3d(1.106, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 29.93%
  transform matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 35.54%
  transform matrix3d(1.098, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 36.74%
  transform matrix3d(1.097, 0, 0, 0, 0, 1.098, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 41.04%
  transform matrix3d(1.096, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 44.44%
  transform matrix3d(1.097, 0, 0, 0, 0, 1.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 52.15%
  transform matrix3d(1.099, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 59.86%,
 63.26%
  transform matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 100%,
 75.28%,
 85.49%,
 90.69%
  transform matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
 
@keyframes appear
  50%
   transform translate(-50%,-50%) scaleY(1.26) rotate(-1deg) scaleZ(0.8)
   opacity 0.4
  70%
   filter blur(3px)
   opacity 1
  100%
   transform translate(-50%,-52%) scaleY(1.25) rotate(1deg)
   opacity 0.3
   filter blur(1px)
   
@keyframes appearr
  50%
   transform translate(-50%,-50%) scaleY(1.25) rotate(1.5deg) scaleZ(0.8)
   opacity 0.4
  70%
   filter blur(3px)
   opacity 1
  100%
   transform translate(-50%,-52%) scaleY(1.26) rotate(-1.5deg)
   opacity 0.3
   filter blur(1px)  

/////BREAK

@media all and (min-width:1200px) 
   
 #title_manta, #title_ray
  display inline-block
  position absolute
  background-repeat no-repeat
  background-size cover
  z-index 1500
  transition all 3.3s ease-in-out
  opacity 1
  
 #title_manta
  top 50%  
  left calc(50% - 125px)
  width 250px
  height 80px   
  background-image $bg--img-manta-title
  transform:translate(-50%,-50%) scaleY(1.15) rotate(1deg)
  animation:appear 5s linear infinite alternate
  
 #title_ray
  top 50% 
  width 130px
  height 80px 
  left calc(50% + 125px)
  background-image $bg--img-ray-title
  transform:translate(-50%,-50%) scaleY(1.15) rotate(1deg)
  animation:appearr 5s 0.5s linear infinite alternate 
  
 
@media all and (max-width:1199px)    
  #title_manta, #title_ray
   display block
   position absolute
   background-repeat no-repeat
   background-size cover
   z-index 1500
   transition all 3.3s ease-in-out
   opacity 1
  
  
  #title_manta
   width 250px
   height 80px   
   background-image $bg--img-manta-title
   top 40%
   left 50%
   transform:translate(-50%,-50%) scaleY(1.15) rotate(1deg)
   animation:appear 5s linear infinite alternate
  
  #title_ray
   width 130px
   height 80px 
   left 50%
   background-image $bg--img-ray-title
   transform:translate(-50%,-50%) scaleY(1.15) rotate(1deg)
   animation:appearr 5s 0.5s linear infinite alternate 
   top calc(40% + 150px)
   transform:translate(-50%,-50%) scaleY(1.15) rotate(1deg)
   
   
   
@media all and (max-width:599px) 
 body,
 header,
 nav,
 #main,
 #mainVisual 
  position relative
  overflow hidden
  
 #head_bg img 
  max-width 76%
  opacity 0.55

 #arrow 
  height 7%
  bottom 9% !important
 
 .pc 
  display none !important
 
 .sp 
  display block

 /*menu*/
 .mask3 
  overflow hidden
 
 #btn_bio a 
  top 10px
  text-shadow 1px 0 0 #555
 
 #btn_contact a 
  bottom 5px
  max-width 40%
 
 #btn_access a 
  right -56px
 
 #btn_access a.on 
  right -46px
 
 #btn_menu a 
  left 6px
 

 /*MENU*/
 #bio_cont .mask3 .mask_cont 
  margin 0px 10px 0 10px
  font-size .9em
  letter-spacing 0
  line-height 1.7
 
 #bio_cont.is-visible .mask3 .mask_cont 
  margin 10px 15px 0 15px
  font-size 1em
 
 #bio_cont .mask2:before 
  background-size cover
  background-position 60% top
 

 /*FICHE TECHNIQUE*/
 #menu_cont .mask1 
  opacity 0
  transform translate3d(0, 0, 0)
 
 #menu_cont .mask2 
  width 100%
  height 50%
  transform translate3d(0, -100%, 0)
  transition-duration 0.7s
 
 #menu_cont .mask3 
  width 100%
  height 50%
  bottom 0
  top auto
  transform translate3d(0, 100%, 0)
  transition-duration 0.7s
 
 #menu_cont .mask3 .mask_cont .fadein_item 
  transform translate3d(0, 100px, 0) skewX(-30deg)
  transition all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
 
 #menu_cont .mask3 .mask_cont 
  width 100%
  margin -20px 0 0 0
  text-align center
  line-height 1.5
  font-size 1em
  .resume
   padding 0 4em
  .mask_tit 
   display none
 
 #menu_cont .mask3 .mask_cont .fadein_item:nth-of-type(10) 
  margin-top 2px
 
 #menu_cont.is-visible .mask1 
  opacity 1

 #menu_cont.is-visible .mask2 
  transform translate3d(0, 0, 0)
 
 #menu_cont.is-visible .mask3 
  transform translate3d(0, 0, 0)
 

 /*DOSSIER DE PRESSE*/
 #access_cont .mask1 
  opacity 0
  transform translate3d(0, 0, 0)
 
 #access_cont .mask2 
  width 100%
  height 50%
  transform translate3d(0, -100%, 0)
  transition-duration 0.7s
  object
   max-width 210px
   max-height 300px
  
 .mask_cont.col__1, .mask_cont.col__2
   width 100% 
 
 #access_cont .mask3 
  width 100%
  height 50%
  bottom 0
  top auto
  transform translate3d(0, 100%, 0)
  transition-duration 0.7s

 
 #access_cont .mask3 .mask_cont .fadein_item 
  transform translate3d(0, 100px, 0) skewX(-30deg)
  transition all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
  margin-bottom 15px
 
 #access_cont .mask3 .mask_cont 
  width 100%
  margin -20px 0 0 0
  text-align center
  line-height 1.8
  font-size 1em

 #access_cont .mask3 .mask_cont p 
  line-height 1.2
  font-size 0.8em

 #access_cont.is-visible .mask1 
  opacity 1
 
 #access_cont.is-visible .mask2 
  transform translate3d(0, 0, 0)
 
 #access_cont.is-visible .mask3 
  transform translate3d(0, 0, 0)
 

 //CONTACTS//
 #contact_cont .mask2 
  background-size cover
 
 #contact_cont .mask3 .mask_cont .mask_small 
  font-size 1em !important
 
 #contact_cont .mask3 .mask_cont 
  font-size 1em

 #contact_cont.is-visible .mask3 .mask_cont 
  line-height 1.4
 

 /*GALLERY*/
 #gallery_left01 .mask2 
  width 100%
  right 0
  bottom 0
  left 0
  top 0
  background-size cover

 #gallery_left01 .mask3 
  width 100%
  background $bg--color-gall-transp
  text-shadow 1px 0 0 #555

 #gallery01.active #gallery_left01 .mask2 
  width 100%
  right 0
  bottom 0
  left 0
  top 0
 

 /**/
 #gallery_left02 .mask2 
  width 100%
  right 0
  bottom 0
  left 0
  top 0
  background-size cover
 
 #gallery_left02 .mask3 
  width 100%
  background $bg--color-gall-transp
  text-shadow 1px 0 0 #555
 
 #gallery02.active #gallery_left02 .mask2 
  width 100%
  right 0
  bottom 0
  left 0
  top 0
 

 /**/
 #gallery_left03 .mask2 
  width 100%
  right 0
  bottom 0
  left 0
  top 0
  background-size cover
 
 #gallery_left03 .mask3 
  width 100%
  background $bg--color-gall-transp
  text-shadow 1px 0 0 #555

 #gallery03.active #gallery_left03 .mask2 
  width 100%
  right 0
  bottom 0
  left 0
  top 0
 

 /**/
 #gallery_left04 .mask2 
  width 100%
  right 0
  bottom 0
  left 0
  top 0
  background-size cover

 #gallery_left04 .mask3 
  width 100%
  background $bg--color-gall-transp
  text-shadow 1px 0 0 #555
 
 #gallery04.active #gallery_left04 .mask2 
  width 100%
  right 0
  bottom 0
  left 0
  top 0
 

 /**/
 #sns 
  position fixed
  bottom 20px
  right 20px
  transform translate(80px, 0)
 
 #sns ul li 
  float none
  margin-top 10px
 
 .mask_small 
  font-size 1em
  /*line-height 20px*/
 
 .mask_bottom 
  margin-bottom 10px
  line-height 2
 
 .mask_top 
  margin-top 10px
 
 #gallery01 #gallery_left01 .mask2,
 #gallery02 #gallery_left02 .mask2,
 #gallery03 #gallery_left03 .mask2,
 #gallery04 #gallery_left04 .mask2 
  transition-duration 1s
 
 #gallery01.active #gallery_left01 .mask2,
 #gallery02.active #gallery_left02 .mask2,
 #gallery03.active #gallery_left03 .mask2,
 #gallery04.active #gallery_left04 .mask2 
  transform translate3d(0, 0, 0)
 

 /* Menu */

 #menu_all 
  visibility hidden

 #menu_all.is-visible 
  visibility visible
  //BAILH
            
          
!
            
              imagesLoaded(document.querySelectorAll("img"), function() {
 document.body.classList.remove("loading");

 var el = document.getElementById("perspective");
 var imgs = Array.from(el.querySelectorAll("img"));
});

/////
      $('.scene').parallax({
        calibrateX: false,
        calibrateY: true,
        invertX: false,
        invertY: true,
        limitX: false,
        limitY: 8,
        scalarX: 2,
        scalarY: 2,
        frictionX: 0.2,
        frictionY: 0.2
      });

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console