html {
    -webkit-font-smoothing: antialiased;
  }

/* indispensable pour les tailles en rem */
html {font-size: 100%;}
html { font-size: 1vw;}

  body {
    overflow-x: hidden;
    background: rgba(0,0,0,1);
   
  }

  a {
    text-decoration: none;
    color: black;
  }

  .name, .site-name, .proj-over span:first-of-type {
      padding-bottom: 10px;
    text-transform: uppercase;
       font-family: 'Sintony', sans-serif;
      /*font-size: 2.0rem;*/
      
      font-size: 16px;
      font-style: bold;
    font-weight: 700;
      color: rgba(255,255,255,0.8);
  }

  .name, .cadre h1, .cadre p {
    font-weight: 100;
  }

  .project {
    cursor: pointer;
  }

  .overlay, .cadre #wrapper {
    margin: auto;
  }

  
  hr {
    width: 70%;
    border: 3px solid black;
    margin: 3.5em 0;
    height: 0;
  }

  ul {
    list-style-type: none;
  }


  .proj-over span:last-of-type {
    font-family: 'Sintony', sans-serif;
      font-size: 1.3rem;
      font-style: normal;
    font-weight: 400;
      color: red;
  }

  .info p {
    font-size: 1.3em;
    line-height: 26px;
    padding-left: 10px;
    white-space: pre-line;
  }

  .project {position: absolute; z-index: 1000;}
  .project a { position: relative; z-index: 1000;}
  .project a { overflow: hidden; }
  .project a img { -webkit-backface-visibility: hidden; }

  .site-name { top: 50%; font-size: 1.5em; z-index: 1002; cursor: default; transition: opacity .5s ease; -webkit-transform: none;}
    .right:before, .left:after { content: ''; width: 60px; height: 5px; background: black; top: 35%;}
    .right:before { right: 105%; }
    .left:after { left: 105%; }


  .project a:hover + .site-name, .soon:hover + .site-name {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transition: all .5s ease;
  }

  .project a:hover .home-overlay {
    opacity: 1;
    -webkit-transform: translateY(-140px) translateZ(0);
    -moz-transform: translateY(-140px) translateZ(0);
    transition: all .5s ease;
  }

  .project a img {
    display: block;
    max-width: 100%;
    height: auto;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,-1px);
  }

  .over-text {
    top: 0 !important;
    left: 0 !important;
  }

 
 
    .lalignedecouleur-pr header { background: url(../films/lalignedecouleur/lpj-lalignedecouleur-fond.jpg) center no-repeat; }
    /*.lalignedecouleur-pr .devices { background: url(../films/lalignedecouleur/lalignedecouleur.jpg) center no-repeat; }*/

    .correspondances-pr header { background: url('../films/correspondances/lpj-correspondances-fond.jpg') center no-repeat; }
   /* .correspondances-pr .devices { background: url(../films/correspondances/correspondances-film.jpg) center no-repeat; }*/

    .jaireve-pr header { background: url(../films/jaireve/lpj-jairevedunegrandeetenduedeau-fond.jpg) center no-repeat; }
    /*.jaireve-pr .devices { background: url(../films/jaireve/jaireve-film.jpg) center no-repeat; }*/

    .offtheroad-pr header { background: url('../films/offtheroad/lpj-Peter&me-fond.jpg') center no-repeat; }
    /*.offtheroad-pr .devices { background: url('../films/offtheroad/offtheroad-film.jpg') center no-repeat; }*/

    .chicagoimprovisations-pr header { background: url('../films/chicagoimprovisations/chicagoimprovisations-film.jpg') center no-repeat; }
    /*.chicagoimprovisations-pr .devices { background: url(../films/chicagoimprovisations/lpj-chicagoimprovisations-fondlite.jpg) center no-repeat; }*/

    .regardsdefemmes-pr header { background: url(../films/regardsdefemmes/regardsdefemmes-film.jpg) center no-repeat; }
    /*.regardsdefemmes-pr .devices { background: url('../films/regardsdefemmes/lpj-regardsdefemmes01.png') center no-repeat; }*/
    
    .bamsetmoumy-pr header { background: url(../films/bamsetmoumy/lpj-bamsetmoumy-fond.jpg) center no-repeat; }
   /* .bamsetmoumy-pr .devices { background: url(../films/bamsetmoumy/bamsetmoumy-film.jpg) center no-repeat; }*/

    .allolavie-pr header { background: url(../films/allolavie/allolavie-film.jpg) center no-repeat; }
    /*.allolavie-pr .devices { background: url(../films/allolavie/allolavie-film.jpg) center no-repeat; }*/

    .femmesassises-pr header { background: url(../films/femmesassisessouslecouteau/femmesassises-film.jpg) center no-repeat; }
   /* .femmesassises-pr .devices { background: url(../films/femmesassisessouslecouteau/femmesassises-film.jpg) center no-repeat; }*/

    .lesdetectives-pr header { background: url(../films/lesdetectives/lesdetectives-film.jpg) center no-repeat; }
   /* .lesdetectives-pr .devices { background: url(../films/lesdetectives/lesdetectives-film.jpg) center no-repeat; }*/

    .larbredanslaville-pr header { background: url(../films/larbredanslaville/larbredanslaville-film.jpg) center no-repeat; }
    /*.larbredanslaville-pr .devices { background: url(../films/larbredanslaville/lpj-larbredanslaville-01.jpg) center no-repeat; }*/

    .lepaysperdu-pr header { background: url(../films/lepaysperdu/lepaysperdu-film.jpg) center no-repeat; }
    /*.lepaysperdu-pr .devices { background: url(../films/lepaysperdu/lpj-film-lepaysperdu.jpg) center no-repeat; }*/


/** THEME
===================================*/


  /*fix other elements on the page moving (on Chrome)*/
  -webkit-transform: translatez(0);
  -moz-transform: translatez(0);
      -ms-transform: translatez(0);
      -o-transform: translatez(0);
      transform: translatez(0);
}


/*  **************************************************************************

                                 gallerie des films

  ***************************************************************************/

.grid {
  width: 100%;
  max-width: 2400px;
  margin: auto;
  overflow: hidden;
}

.grid ul {
  width: 100%;
  margin: 0;
  padding: 0;
}

.grid ul li {
  float: left;
  width: 33.33%;
  /*margin-left: -5px;*/
  text-align: center;
  position: relative;
  color: white;
/*  height: 500px;*/
  padding: 0 0 25% 0;
  -webkit-transform: perspective(600px) translate3d(0,0,0);
  -moz-transform: perspective(600px) translate3d(0,0,0);
  transform: perspective(600px) translate3d(0,0,0);
  transition-property: transform;
  transition-timing-function: ease;
  transition-duration: .2s;
}

.grid ul li a {
    cursor: pointer;
  position: absolute;
  opacity: 0;
  background: rgba(0,0,0,.8);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: perspective(600px) translate3d(0,0,0);
  -moz-transform: perspective(600px) translate3d(0,0,0);
  transform: perspective(600px) translate3d(0,0,0);
/*  margin: -2px 0 0 -2px;*/
  transition-property: opacity;
  transition-timing-function: ease;
  transition-duration: .6s;
}


/**-------images page films-------**/

.grid ul li:first-of-type { background: url('../films/lalignedecouleur/lalignedecouleur-film.jpg') center no-repeat; }
.grid ul li:nth-of-type(2) { background: url('../films/correspondances/correspondances-film.jpg') center no-repeat; }
.grid ul li:nth-of-type(3) { background: url('../films/jaireve/jaireve-film.jpg') center no-repeat; }
.grid ul li:nth-of-type(4) { background: url('../films/offtheroad/offtheroad-film.jpg') center no-repeat; }
.grid ul li:nth-of-type(5) { background: url('../films/chicagoimprovisations/chicagoimprovisations-film.jpg') center no-repeat; }
.grid ul li:nth-of-type(6) { background: url('../films/regardsdefemmes/regardsdefemmes-film.jpg') center no-repeat; }
.grid ul li:nth-of-type(7) { background: url('../films/bamsetmoumy/bamsetmoumy-film.jpg') center no-repeat; }
.grid ul li:nth-of-type(8) { background: url('../films/allolavie/allolavie-film.jpg') center no-repeat; }
.grid ul li:nth-of-type(9) { background: url('../films/femmesassisessouslecouteau/femmesassises-film.jpg') center no-repeat; }
.grid ul li:nth-of-type(10) { background: url('../films/lesdetectives/lesdetectives-film.jpg') center no-repeat; }
.grid ul li:nth-of-type(11) { background: url('../films/larbredanslaville/larbredanslaville-film.jpg') center no-repeat; }
.grid ul li:nth-of-type(12) { background: url('../films/lepaysperdu/lepaysperdu-film.jpg') center no-repeat; }


.grid ul li {
  background-size: cover !important;
}


.no-touch .grid ul li a:hover, .no-touch .coming-soon:hover {
  opacity: 1;
  -webkit-transform: perspective(600px) translate3d(0,0,4px);
  -moz-transform: perspective(600px) translate3d(0,0,4px);
  transform: perspective(600px) translate3d(0,0,4px);
  transition-property: opacity;
  transition: .4s ease;
}

.proj-over {
    text-transform: uppercase;
       font-family: 'Sintony', sans-serif;
      /*font-size: 2.0rem;*/
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: white;
  
    Font-Weight: Bold;
  margin: auto;
  font-size: 12px;
  letter-spacing: 1px;
  overflow: hidden;
   line-height: -16px;
   

}

.proj-over span {
  position: absolute;
  width: 100%;
  display: block;
  margin: auto;
  text-align: center;
  bottom: 60px;
  -webkit-transform: translateY(70px);
  -moz-transform: translateY(70px);

  /*transition: all .8s ease;*/
  opacity: 0;
}

.proj-over span:first-of-type {
  padding: 30px 0;
}

.proj-over span:last-of-type {
  display: none;
}

.no-touch .proj-over span:last-of-type {
  display: block;
}

.no-touch .grid ul li a:hover .proj-over span, .no-touch .coming-soon:hover .proj-over span {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  transition-property: transform;
  transition: all .5s ease;
}

.no-touch .grid ul li a:hover .proj-over span:last-of-type, .no-touch .coming-soon:hover .proj-over span:last-of-type {
  transition: all .575s ease;
}

/*  **************************************************************************

                                MEDIA QUERIES

  ***************************************************************************/



/*2000 px*/
@media screen and (min-width: 2000px) {
  body.home {background-size: cover;}
}

/*@media screen and (min-height: 1080px) {
  .home #wrapper, body.home { height: 3620px; }
}*/

/*1800 px*/
@media screen and (min-width: 112.5em) {
  .cadre header {height: 890px; padding-bottom: 0; margin-bottom: 30%;}
  .devices {width: 1492px; height: 978px; padding-bottom: 0; margin-left: -726px;}
  .single {width: 1400px; margin-left: -700px; padding: 0;}
  .cadre h1 {padding-top: 50px;}
}

/*1700 px*/

@media screen and (max-width: 1700px) {
  .correspondances { top: 1400px; }
  .regardsdefemmes { top: 2600px; }
  .offtheroad { top: 3300px; }
  .chicagoimprovisations { top: 2700px; }
  .jaireve { top: 4750px; }
  .bamsetmoumy { top: 4600px;}
  .allolavie { top: 5750px; }
  .femmesassises { top: 7200px; }
  .lesdetectives { top: 6600px; }
  .home #wrapper, body.home { height: 3320px; }
}

/*1600 px*/
@media screen and (max-width: 100em) {
}

/*1500 px*/

@media screen and (max-width: 1550px) {
  .correspondances { top: 1400px; }
  .regardsdefemmes { top: 2500px; }
  .offtheroad { top: 3000px; }
  .chicagoimprovisations { top: 2500px; }
  .jaireve { top: 4300px; }
  .bamsetmoumy { top: 4100px;}
  .allolavie { top: 5250px; }
  .femmesassises { top: 6500px; }
  .lesdetectives { top: 5800px; }
  .home #wrapper, body.home { height: 3000px; }
}



/*1400 px*/
@media screen and (max-width: 87.5em) {
  .info p { white-space: normal; width: 70%; font-size: 1.2em;}
  .social {margin-left: -40%;}
  .correspondances { top: 1300px; }
  .regardsdefemmes { top: 2250px; }
  .offtheroad { top: 2800px; }
  .chicagoimprovisations { top: 2300px; }
  .jaireve { top: 4100px; }
  .bamsetmoumy { top: 3900px;}
  .allolavie { top: 5050px; }
  .femmesassises { top: 6300px; }
  .lesdetectives { top: 5700px; }
  .home #wrapper, body.home { height: 2950px; }
}

/*1280 px*/
@media screen and (max-width: 80em) {
  /*.home #wrapper {height: 4200px;}*/
  .peanuts-pr .devices, .lowes-pr .devices { top: 300px; margin-bottom: 350px;}
  .jaireve { top: 3900px; }
  .bamsetmoumy { top: 3900px; left: 22%;}
  .allolavie { top: 4850px; }
  .femmesassises { top: 6000px; }
  .lesdetectives { top: 5400px; }
  .home #wrapper, body.home { height: 2800px; }
  .mission { margin-top: 25%;}


}

@media screen and (max-height: 800px) {
  .home #wrapper, body.home {height: 2780px;}
}

@media screen and (max-width: 1200px) {

  /*.mission p { font-size: 1.3em; line-height: 25px; }*/

}

@media screen and (max-width: 1180px) {
  .correspondances { top: 1100px; }
  .regardsdefemmes { top: 1900px; }
  .offtheroad { top: 2400px; }
  .chicagoimprovisations { top: 2000px; }
  .jaireve { top: 3400px; }
  .bamsetmoumy { top: 3300px;}
  .allolavie { top: 4150px; }
  .femmesassises { top: 5100px; }
  .lesdetectives { top: 4600px; left: 34%;}
  .home #wrapper, body.home { height: 2500px; }
}

/*1240 px*/
@media screen and (max-width: 77.5em) {
  /*About Page*/
  .about header ul { width: 100%; margin: 9.5em auto;}
  .about-circle { width: 380px; height: 380px;}
  .about-circle .overlay { width: 360px; height: 360px; }
  .about-circle .overlay p { top: 60px;}
  .cadre header {padding-bottom: 55%;}
  .devices {top: 300px; margin-bottom: 330px;}

}

/*1100 px*/
@media screen and (max-width: 68.75em) {
  /*.home #wrapper {height: 4000px;}*/
  .info { min-width: 0; }
  .cadre img { max-width: 90%; }
  .clients ul li { width: 25%;}
  .clients ul li:nth-of-type(25) { margin-left: -4px; }
  .about #wrapper { height: 1550px; }
  .peanuts-pr .devices, .lowes-pr .devices { width: 700px; height: 560px; margin-left: -350px;}
  .grid ul li { width: 50%; padding: 0 0 38% 0;}
  /*.mission { margin-top: 16%;}*/

}

/*1024 px*/
@media screen and (max-width: 64em) {
  .document .mobile { display: block;}
  .mult, .phone-container, .femmesassises-pr .no-pad { display: none;}
  .item {opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none;}

  .column { float: none; width: 100%; }
  .about-wrapper-main { padding: 20px 30px 0 30px;}
  /*.mission { padding: 0; margin-top: 100px;}
  .mission hr { width: 80% !important; }*/

  .capabilities ul li { width: 50%; }

  .bx-wrapper {
   max-width: 100% !important;
   float: right;
  }

  img.fit.fl-right { margin: 40px 0; max-width: 100%; min-width: 100%; float: none !important; }
  img[src="img/about1.jpg"] { margin-top: 100px; }

}

/*900 px*/
@media screen and (max-width: 56.25em) {
  .info {right: -60px;}
  .info ul {margin-left: 40px;}
  .contact-info p { white-space: normal; }
  .peanuts-pr .devices, .lowes-pr .devices { top: 200px; margin-bottom: 220px;}
}

/*850 px*/
@media screen and (max-width: 53.125em) {
  .mission p {white-space: normal;}
}

/*Both Ipad Potrait and landscape*/

/*800 px*/
@media screen and (max-width: 50em), screen and (max-device-width : 64em) {
  /*Home Page*/
  .laser {left: 50px; top: 130px; background-size: 40%; }
  .info {width: 80%; right: 0; top: 50px;}
    .info p {width: 340px; font-size: 1em; line-height: 28px;}
  .recent {display: none;}
  .overlay {display: none;}
    .info, .laser {position: absolute;}
  .info ul, .info hr {display: none;}
  .menu {background-size: 28% !important;}
  .site-name { font-size: 1em;}
  .site-name:before, .site-name:after {height: 3px; width: 50px;}
  .project {left: auto; right: auto;}
  .home #wrapper, body.home {height: 4700px;}
  .lalignedecouleur {top: 300px; width: 70%;}
  .correspondances {top: 750px; width: 70%; right: 2%;}
    .correspondances .site-name {left: -140px;}
  .regardsdefemmes {top: 1350px; right: 10%; width: 70%;}
    .regardsdefemmes .site-name {left: -100px;}
  .offtheroad {top: 1750px; left: 5%; width: 75%;}
    .offtheroad .site-name {right: -70px;}
  .chicagoimprovisations {top: 2180px; right: 4%; width: 65%;}
    .chicagoimprovisations .site-name {left: -90px;}
  .jaireve {top: 2640px; left: 6%; width: 65%;}
    .jaireve .site-name {right: -120px;}
  .allolavie {top: 3000px; left: 20%; width: 70%;}
    .allolavie .site-name {left: -70px;}
  .bamsetmoumy {top: 3280px; left: 3%; width: 65%;}
    .bamsetmoumy .site-name {right: -180px;}
  .femmesassises {top: 3660px; left: 23%; width: 65%;}
    .femmesassises .site-name {left: -120px;}
  .lesdetectives {top: 4160px; right: 3%; width: 60%;}
    .lesdetectives .site-name {left: -180px;}
  .home-overlay {display: none;}
  .project a:hover + .site-name, .soon:hover + .site-name { opacity: 1; -webkit-transform: none;
    transition: none; }


  /*Project Pages*/
  .horz, .vert { display: none;}
  .cadre img { margin: 5em auto 5em auto; }
  .cadre .menu { padding: 13px; margin: 26px 0 25px 24px; }
  .button:hover { background: transparent; color: #333; }
  .cadre p { white-space: normal; margin: auto 1.5em; }
  .cercle { width: 52px; height: 52px; top: 15px; padding: 12px;}
  nav div {top: 12px;}
  nav div:first-of-type {right: 10px; left: auto;}
  nav div:last-of-type {right: 10px;}
  .prev { left: auto; right: 140px; opacity: 1;}
  .next { right: 70px; opacity: 1;}
  .prev, .next {-webkit-transform: none !important; moz-transform: none !important; ms-transform: none !important; transform: none !important;}
  nav div span { display: none; }
  .cadre header { padding-bottom: 80%;  position: relative;}
  .regardsdefemmes-film header {background-position: 10%;}
  .devices { width: 100%; padding-bottom: 64%; -webkit-transform: none !important; -moz-transform: none !important; -o-transform: none !important; -ms-transform: none !important; transform: none !important; margin-left: -50%; top: -240px; margin-bottom: -180px;}
  .single {padding-bottom: 72%;}
  .cadre #wrapper {position: static;}
  .peanuts-pr .devices, .lowes-pr .devices {padding-bottom: 0; margin-bottom: -230px; top: -240px;}

  /*About Page*/
  .about-circle .overlay p {white-space: normal;}
    .about-circle .overlay p:after { display: block; position: static; margin: 1em auto;}
  .about header, .contact header { height: auto; position: static; padding: 10em 0; -webkit-transform: none !important; -moz-transform: none !important; -o-transform: none !important; -ms-transform: none !important; transform: none !important;}
  .contact header {padding: 0;}
    .about header ul {margin: auto;}
    .about footer {position: static;}
    .about header ul li { width: 100%; display: block;}
    .about-circle { width: 430px; height: 430px; position: relative; cursor: default;}
    .kathrin.about-circle {margin: -2em auto 19em auto;}
    .dave.about-circle {margin: 0 auto 8em auto;}
    .about-circle .overlay { transition: none; width: 100%; opacity: 1; border-radius: 0; background: none; height: auto; position: relative; top: 100%; padding: 15px 0; }
    .about-circle .overlay p {position: static; color: black; width: 110%; margin-left: -5%;}
    .about-circle .fa-linkedin, .about-circle .fa-envelope-o {position: static; color: white; background: black; margin: 10px;}
  .clients ul li { width: 33.33%;}
    .clients ul li:nth-of-type(28) {margin-left: 33%;}
  .mission p {padding: 0 1em;}
  .mission hr {width: 90%;}
  br {display: none;}
  .exp ul {width: 75%;}
  .exp ul li {margin-bottom: 0;}
  .about-info, .clients {position: static;}

  /*Contact Page*/
  .contact header { height: 340px; position: static;}
  .contact-info {padding: 0 2em 1em 2em; position: static;}
  .contact footer {position: static;}
}

/*700 px*/
@media screen and (max-width: 43.75em) {
  .peanuts-pr .devices, .lowes-pr .devices {top: -200px; margin-bottom: -200px; width: 480px; margin-left: -240px; height: 350px;}
  .peanuts-pr h1, .lowes-pr h1 {padding-top: 30px;}
  .capabilities ul li { width: 100%; }
}



/*640 px*/
@media screen and (max-width: 40em) {

  .info p {width: 90%;}
  .info {top: 100px; width: 80%;}
  .clients ul li { width: 50%; margin-top: 30px; background-size: 80%;}
    .clients ul li:nth-of-type(28) {margin-left: -4px;}
    .contact footer { padding: 1em 0;}
  .devices {top: -140px; margin-bottom: -120px;}
  .project {position: static; width: 85%; padding: 18px 0; margin: auto;}
  .lalignedecouleur {padding: 320px 0 18px 0;}
  .project span.site-name { position: relative; font-size: 1.3em; left: 66px; top: 10px;}
  .site-name:after {left: -55px; right: auto;}


  .home footer {position: relative; bottom: 0; margin-top: 2em;}
  .home #wrapper {height: auto;}

}

@media screen and (max-width: 568px) {
  .links li { padding: 5px 0; }
  .links {font-size: 2.5em;}
  .grid ul li { width: 100%; padding: 0 0 77% 0;}
  .play {opacity: 0;}
 /* body.home {background: url(../img/home-bg-mobile.jpg) top center no-repeat;}*/
}

@media screen and (max-width: 530px) {
  .home #wrapper, body.home {height: auto;}
}


/*500 px*/
@media screen and (max-width: 31.25em) {
  /*About Page*/
  .mission p, .about-circle .overlay p {line-height: 25px; font-size: 1.2em;}
  .about-circle {width: 260px; height: 260px;}
  .kathrin.about-circle {margin: -5em auto 17.5em auto;}
  /*.ab-ctc {font-size: 1.3em; padding: 8px; width: 24px; height: 24px;}
  .about-circle a {width: 26px; height: 26px;}*/
  .exp ul { padding: 0 1em; }
  .exp ul li { font-size: .8em; }
  .peanuts-pr .devices, .lowes-pr .devices {top: -160px; margin-bottom: -160px; width: 320px; margin-left: -160px; height: 260px;}

}

/*414 px*/
@media screen and (max-width: 25.875em) {
  .info {width: 70%; top: 70px;}
  .info p {width: 85%; line-height: 24px;}
  .cadre p {font-size: .9em; line-height: 24px;}
  .cadre h1 {margin-bottom: 10px;}
  .cadre header { padding-bottom: 100%; margin-bottom: 5%;}
  .exp ul {width: 90%;}
  .contact-info p {font-size: 80%;}
  .cadre h1 {font-size: 2em; padding-top: 20px;}

}

/*320 px*/
@media screen and (max-width: 20em) {
  .about-circle .overlay p { width: 100%; margin: auto;}
  .peanuts-pr .devices, .lowes-pr .devices {width: 280px; margin-left: -140px; height: 228px;}
}

/*++++++++++++++++++++++*/
/* le titre du film */
/************************/

.titre-film {
    display: block;
    position: absolute;
    background: transparent;
    border: 2px solid red;
    border-radius: 2px;
    width: 33%;
    height: 44px;
    transition: background .4s ease;
    margin-top: 0px; 
    padding-top: 12px;
    text-align: center;
    margin-left: 21rem;
    color: #ff0000;
    font-size: 1.8rem;
    /*width: 50%;
    top: 0px;*/
    /*opacity: 1;*/
    /*transition: all .5s ease;*/
    
    z-index: 10;
  }