html {
    width: 100%;
    margin: 0;  
    overflow-x: hidden;
}
ul{
    margin: 0;
    padding: 0;
}
p{
  font-size: 1.4vw;
}
h1 {
    font-size: 5.5vw;
}
h2 {
    font-size: 4.5vw;
}
h3 {
    font-size: 3.5vw;
}
h4 {
    font-size: 2.5vw;
}
h5{
    font-size: 2vw
}
li{
    list-style-type: none;
}
.logoLink{
    z-index: 555;
}
/***************************/
.fade-in{
      opacity:0;  /* make things invisible upon start */
    animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    animation-duration:1s;
    animation-delay: 0,5s
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.displayOff{
  display: none;
}
.fastTop{
  top: 45vh;
}
.blackTxt{
  color: black;
}
.quikMargin{
  margin: auto;
}
.fastCenterTxt{
 text-align: center;
}
.fastFlex{
display: flex;
}
.rowF{
flex-direction: row;
}
.blackGround{
background-color: black;
}
.whiteGround{
background-color: white;
}
.columF{
flex-direction: column;
}
/*****************************/
.bodyContact,
.bodyLabs,
.bodyIndex,
.bodyWorks {
    overflow-y: scroll;
    overflow-x: hidden;
    margin: 0;  
    background-color:black;
}
.bodyCase,
.bodyLabs,
.bodyContact,
.bodyIndex,
.bodyWorks,
.caseTitle,
h2,
li {
    font-family: 'alienleaguecond.ttf';
}
.postDump
{
    font-family: 'alienleaguecond.ttf';
  color: white;
  text-align: center;
  padding: 0;
  margin:0;
}
.logoHeader,
.nav a {
    flex-direction: row
}
.nav a,
a {
    text-decoration: none
}
html {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-height: 100%
}
@font-face {
    font-family: 'alienleaguecond.ttf';
    src: url(../font/alienleaguecond.ttf)
}
.titlesSizeNineBox{
    font-size: 10vh
}
img {
  opacity: 1;
  transition: opacity 0.8s;
}
img[data-src] {
  opacity: 0;
}
.bodyWorks {
    padding: 0; 
    -webkit-background-size: cover;
    background-size: cover;
    background-color:black;
}
.bodyContact {
    background: url(../image/nasa.jpg) center no-repeat fixed;
    -webkit-background-size: cover;
    background-size: cover;
    color: #fff;
    height: 100vh;
}
#slideShowLux,
.bulleSlideBox,
.bulleSlideBox img,
.glow-bg,
.imgBulleAccueil,
.imgOpacityWorks,
.moveable,
.tiles 
nav.menu {
    overflow: hidden
}
.tiles {
    margin: auto;
    display: flex;
}
.projectsBox{
    margin: auto;
    display: flex;
    flex-direction: column;  
}
.background {
position: absolute;
    height: 100%;
       width: 100%;
    z-index: 1109;
    background: repeating-linear-gradient(45deg, blue, blue 70.71068px, rgba(101,50,94,0) 70.71068px, rgba(101,50,94,0) 141.42136px);
    background-size: 100% calc(100% + 200px);
    -webkit-animation: background 4s linear infinite;
    animation: background 4s linear infinite;


}
@-webkit-keyframes background {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -200px;
  }
}

@keyframes background {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -200px;
  }
}
.spacer {
  height: 10000px;
  z-index: 1;
  position: relative;
}

.overFlowed{
    margin: auto;
    border-bottom: 2px;
    border-style: solid;
    border-color: rgba(78, 197, 215, 0.5);
    box-shadow: 0 4px 3px -1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    border-right: 0;
    width: 84vw;
    border-left: 0;  
}
.animate-text{
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 0 rgba(0, 0, 0, 0.3), 0 0 0 0px rgba(3, 0, 128, 0.3), 0 0 3px 1px #00effd, 0 0px 0px 0px rgba(0, 0, 0, 0.6), inset 2px 1px 0px rgba(0, 0, 0, 0.3), 2px 4px 0 1px rgba(3, 0, 128, 0.3), 0 0 4px 2px #009efd;
    color: aqua;
} 
.scrollingTitle{
    flex-grow: 1;
    height: 13%;
    display: flex;
    flex-direction: row;
}
.skillsProjects{
       display: flex;
    width: 100%;   
    color: white;
    margin: 0;
    padding-top: 4vw;
    padding-bottom: 4vw;
}
.skillsProjects h3{
  margin: auto;
}

.clientName{
    color: #4EC5D7;
}

.projectsImgContainer{
    width: 100%;
    height: 44vw;
display: flex;
    overflow: hidden;
    justify-content: space-around;
    position: relative;
}

.projectsImgContainer img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: auto;
}
/*
 * CSS Page Transitions
 * Don't forget to add vendor prefixes!
 */
.m-scene .scene_element {
  -webkit-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }
/* line 17, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene .scene_element--fadein {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }
/* line 22, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene .scene_element--fadeinup {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }
/* line 27, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene .scene_element--fadeinright {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }
/* line 32, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene .scene_element--delayed {
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s; }
/* line 37, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene.is-exiting .scene_element {
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse; }
/* line 42, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene.is-exiting .scene_element--delayed {
  -webkit-animation-delay: 0s;
  animation-delay: 0s; }
/* line 47, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene.is-exiting .scene_element--noexiting {
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse; }
/***********************************************/


.footBanner{
    padding-top: 6vw;
    display: flex;
    flex-direction: row;
    height: 35%;
    flex-wrap: wrap;
}
.bttnCont{
    width: auto;
    display: flex;
    flex-grow: 4;
}
.scrollTxtPosition h1{
 background-color: blue;
    margin: auto;    
}

.scrollTxtPosition{ 
animation: textScroll 20s linear infinite;
    white-space: nowrap;
    position: relative;
    display: flex;
    flex-direction: row;
    margin-top: 5vh;
    color: white;
}
.scrollTxtPosition span{ 
    margin: auto;    
}
.LogoFujiDet{
width: -webkit-fill-available;
}
.vhs {  
     white-space: nowrap;
  mix-blend-mode: screen;
  color: transparent;
  text-shadow: 0 0 0.125rem #0f0;
  -webkit-animation: jitter 5s infinite;
          animation: jitter 5s infinite;
}
.vhs::before,
.vhs::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
  -webkit-animation: glitchTxt 5s infinite alternate;
          animation: glitchTxt 5s infinite alternate;
}
.vhs::before {
  text-shadow: 0 0 0.125rem #f00;
}
.vhs::after {
  text-shadow: 0 0 0.125rem #00f;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
@-webkit-keyframes glitchTxt {
  0% {
    -webkit-transform: rotate(0deg) translate(0.11rem) rotate(0deg);
            transform: rotate(0deg) translate(0.11rem) rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(0.11rem) rotate(-360deg);
            transform: rotate(360deg) translate(0.11rem) rotate(-360deg);
  }
}
@keyframes glitch {
  0% {
    -webkit-transform: rotate(0deg) translate(0.11rem) rotate(0deg);
            transform: rotate(0deg) translate(0.11rem) rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(0.11rem) rotate(-360deg);
            transform: rotate(360deg) translate(0.11rem) rotate(-360deg);
  }
}
@-webkit-keyframes jitter {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50.1% {
    -webkit-transform: translateX(0.1em) skew(40deg);
            transform: translateX(0.1em) skew(40deg);
  }
  50.2% {
    -webkit-transform: translateX(-0.2em) skew(-40deg);
            transform: translateX(-0.2em) skew(-40deg);
  }
  50.3% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes jitter {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50.1% {
    -webkit-transform: translateX(0.1em) skew(40deg);
            transform: translateX(0.1em) skew(40deg);
  }
  50.2% {
    -webkit-transform: translateX(-0.2em) skew(-40deg);
            transform: translateX(-0.2em) skew(-40deg);
  }
  50.3% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
  }
.scrollTxtPosition h1{
white-space: nowrap;
    font-weight: normal;
    display: flex;
    margin: auto;
}
@keyframes textScroll {
  0% {
    transform: translate(0, -50%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
::-webkit-scrollbar {
    width: 6px;
    background-color: #63325e;
    background: -webkit-linear-gradient(#43284f, #ad487f, #c9b5a4, #97d0c1);
    background: -o-linear-gradient(#43284f, #ad487f, #c9b5a4, #97d0c1);
    background: -moz-linear-gradient(#43284f, #ad487f, #c9b5a4, #97d0c1);
    background: linear-gradient(#43284f, #ad487f, #c9b5a4, #97d0c1)
}
.fontLogo,
.ph-dot-glow .effect {
    background-repeat: no-repeat;
    background-size: contain
}
::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.8)
}
#inDevelopCase{
    background-color: black;
    width: 100%;
    display: flex;
    position: fixed;
    font-family: 'alienleaguecond.ttf';
    height: 100vh;
    z-index: 10000;
}
.subTitle {
    color: #46CADB;
    text-shadow: 0 0 2px rgba(255, 255, 255, .5);
    font-size: 5.5vh;
    margin-top: 0
}
:required {
    border: 2px dotted orange
}
.pushHeader {
  display: inline-flex;
  position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    justify-content: space-between;
    width: 100%;
}
.linkLogoMove,
 {
    position: absolute
}
#txtDiv {
    font-family: Quicksand, sans-serif;
    width: 79%;
}
.logoHeader {
    height: 10vh;
    top: 0;
    left: 0;
    width: 44vh;
    display: flex;
    z-index: 5;
}
.nav,
nav.menu {
    flex-direction: column
}
.menuwWrote {
    color: white;
    right: 54px;
    top: -13px;
    margin: auto;
    z-index: 500;
}
.menuCommand{
  display: flex;
  padding-right: 8vw;
}
.logoHeader a {
    width: 60px;
    height: 60px;
    z-index: 500;
}
.iconLogo1 {
    display: flex;
    width: 10vh;
    height: 10vh
}
.iconLogo1 img,
.iconLogo2 img {
    margin: auto;
      width: 65%;
    height: 65%;
}
.box-outer {
    overflow: hidden;
    margin: 50px auto;
    width: 200px;
    height: 200px;
    z-index: 50;
    position: absolute;
}
.main_box {
    width: 200px;
    height: 200px;
    position: relative;
    background: #f34c4c;
    border: 5px solid #000;
}
.bar {
    position: absolute;
    width: 50px;
    height: 5px;
    background: blue;
    transition: all 1s linear;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.bar.delay {
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
.top {
        top: -3px;
    left: -5px;
}
.backGrnd{
    display: flex;
    background: linear-gradient(rgba(215,10,1), rgba(172,11,17));
    flex-direction: row;
}
.japanWeb{
    width: -webkit-fill-available;
}
.logoHeader .right {
 top: 18px;
    right: -25px;
    transform: rotate(90deg);
}
.bottom {
        bottom: -4px;
    left: -5px;
}
.jpnWeb{
  margin: auto;
  width: 88vh;
}
.ciseauxBack{
    background-color: #cbcbcb;
}
.videoFujiAnim{
      width: 93vw;
    margin: auto;
}
.videoCafeAnim{
    height: 85vh;
    margin: auto;
}
.videoBulle{
width: -webkit-fill-available;
 margin: auto;
}
.backGRed{
      background-color: rgba(234,6,33);
}
.backGblack{
      background-color: rgba(28,27,27);
}
.flexDir{
      flex-direction: row;
    flex-wrap: wrap;
}
.flexDir img{
    width: 50%;
    flex-grow: 1;
}
.logoHeader .left {
  top: 18px;
    left: -26px;
    transform: rotate(90deg);
}
 @-webkit-keyframes h-move {
 0% {
left: -5px;
}
100% {
left: 200px;
}
}
 @keyframes h-move {
 0% {
left: -5px;
}
100% {
left: 200px;
}
}
.top, .bottom {
    -webkit-animation-name: h-move;
    animation-name: h-move;
}
 @-webkit-keyframes v-move {
0% {
top: -5px;
}
100% {
top:228px;
}
}
 @keyframes v-move {
 0% {
top: -5px;
}
100% {
top:228px;
}
}
.right, .left {
    -webkit-animation-name: v-move;
    animation-name: v-move;
}
.iconLogo2 {
    width: 10vh;
    height: 10vh;
    margin: auto;
    display: flex
}
.default {
    position: fixed;
    background-color: rgba(0, 0, 0, .8);
    overflow: hidden;
}
.moveable {
    position: absolute
}
.nav,
.nav a {
    display: flex;
    position: relative
}
.fontLogo {
    background-image: url(../image/fontLogo.png);
    width: 23vh;
    height: 8vh;
    margin: auto auto auto 9vh;
}
.nav {
    text-align: center;
    margin-left: 31px;
}
.nav a {
    z-index: 1;
    float: left;
    padding: 1em 0 2em;
    width: 100%;
    margin-left: 26px;
    color: #393939;
    -webkit-transition: .7s;
    transition: .7s
}
.nav a:hover {
    color: #c6342e
}
.effect {
    position: absolute;
    z-index: 0;
    top: 12.5%;
    -webkit-transition: .7s cubic-bezier(.175, .885, .32, 1.275);
    transition: .7s cubic-bezier(.175, .885, .32, 1.275)
}
.glow-bg {
width: 100%;
    height: -webkit-fill-available;
    z-index: 600;
    margin: auto;
    display: flex;
    justify-content: space-between;
}
.glow-bg a {
  margin: auto;
}
.glow-bg a h4{
    color: #FFF;
    border-top: solid blue 0.3vw; 
    text-shadow: 0 0 7px rgba(255, 255, 255, .5);
    text-align: left;
    margin: auto;
    transition: visibility 0s, opacity 0.5s linear;
}
.glowOp{
opacity: 1;
}
.glowOpMid{
    opacity: 0.5;
}
.glowOpMid h4{
    margin: auto;
}
.numberingAapear{
display: flex;
}
.numberingDssapear{
display:none;
}
#clientsNameInt span{
  width: max-content;
    color: rgba(78, 197, 215, 0.78);
        transition: visibility 0s, opacity 0.5s linear;    
    margin: auto;
}
#clientsNameInt span h4{
margin: auto;
}
#clientsNameInt {
  display: flex;
    left: 0;
  width: -webkit-fill-available;
}
.ph-dot-glow:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    width: 1px;
    height: 100%;
    background-color: #fff
}
.ph-dot-glow a span {
    display: none
    width:0px;
}
.ph-dot-glow a:hover span {
    display: flex;
    flex-direction: row
}
.ph-dot-glow .effect {
    width: 20px;
    height: 20px;
    bottom: 36px;
    margin-left: -25px;
    background-image: url(../image/arrowTime.png);
    top: 5%
}
.ph-dot-glow a.active:nth-child(4)~.effect {
    left: -15px;
    top: 5%;
    background-color: #0080fd;
    box-shadow: 0 0 25px #0080fd, 0 0 35px #0080fd
}
.ph-dot-glow a:nth-child(1):hover~.effect {
    top: 5%;
    left: 30px
}
.ph-dot-glow a:nth-child(2):hover~.effect {
    top: 25%;
    left: 30px
}
.ph-dot-glow a:nth-child(3):hover~.effect {
    top: 45%;
    left: 30px
}
.ph-dot-glow a:nth-child(4):hover~.effect {
    top: 65%;
    left: 30px;
}
.ph-dot-glow a:nth-child(5):hover~.effect {
    top: 85%;
    left: 30px;
}
.menu_icon_center{
  display: flex;
  flex-direction: column;
  padding: 2vw;
  margin: auto;
}
.menu_icon {
cursor: pointer;
    top: 0px;
    position: fixed;
    right: 0vw;
    background-color: black;
    z-index: 5000;
    display: flex;
    flex-direction: column;
}
.menu_icon_center span {
    height: 2px;
    margin: 0.5vh 0px 0.5vh 0;
    width: 23px;
    background: #FFF;
    box-shadow: 0 0 5px rgba(255, 255, 255, 1);
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
body.open .menu_icon_center>span:first-child {
    -ms-transform: translate(1.4vh) rotate(45deg) scaleX(1.1);
    transform: translateY(1.4vh) rotate(45deg) scaleX(1.1)
}
body.open .menu_icon_center>span:nth-child(2) {
    -webkit-transform: rotate(-45deg) scaleX(1.1);
    -ms-transform: rotate(-45deg) scaleX(1.1);
    transform: rotate(-45deg) scaleX(1.1):;
}
body.open .menu_icon_center>span:nth-child(3) {
    opacity: 0
}
.container {
    max-width: 900px;
    margin: 0 auto
}
.logoInMenu {
    width: 75px;
    height: 75px;
    margin: 0 20px;
    padding: 15px 10px
}
.menuCenterContainer,
div.logoLang,
nav.menu {
    width: 100%;
    display: flex
}
nav.menu {
    background-color: #000000d6;
    position: fixed;
    right: -200vw;
    height: 100%;
    z-index: 1200;
    -webkit-transition:all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -ms-transition: all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition:all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.menuCenterContainer {
    margin: 0;
    flex-direction: column;
    margin-top: 5vw;
}
div.logoLang {
    justify-content: left;
    flex-direction: row;
    height: auto;
    color: #000;
    margin: 0
}
nav.menu ul {
    color: #fff;
    width: 26vh;
    margin: auto;
    list-style-type: lower-roman;
    padding: 0;
    flex-direction: column
}
#slideShowLux,
#slider3,
#sliderLux,
.iconLuxBox li,
.leftSideCommand {
    list-style-type: none
}
nav.menu ul li.first-child {
    border-top: 1px solid #999
}
.classBorder,
.skillTitleSelect {
    border-top: 0;
    border-right: 0;
    border-left: 0
}
nav.menu ul li::marker{
  font-size: 3.5vw;
}
.txtGlitch {
    position: relative;
    color: #fff;
    mix-blend-mode: lighten;
    width: 100%;
    margin: 0;
    text-align:  -webkit-center;
}
.txtGlitch:after,
.txtGlitch:before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, .1);
    clip: rect(0, 0, 0, 0)
}
.txtGlitch:before {
    left: -6px;
    text-shadow: 1px 0 rgba(255, 0, 0, .4);
    color: rgba(70, 202, 219, .2)
}
.bloc-principal h2,
.caseTitle,
.titreBox,
nav.menu a {
    color: #fff
}
.txtGlitch:after {
    left: 1px;
    text-shadow: -7px 0 rgba(0, 0, 255, .1)
}
.txtGlitch:hover:before {
    height: 100%;
    width: 100%;
    text-shadow: -8px 0 rgba(255, 0, 0, .3);
    -webkit-animation: glitch-loop-1 .7s infinite ease-in-out alternate-reverse;
    animation: glitch-loop-1 .7s infinite ease-in-out alternate-reverse
}
.txtGlitch:hover:after {
    text-shadow: -5px 0 rgba(16, 13, 255, .3);
    -webkit-animation: glitch-loop-2 .6s infinite ease-in-out alternate-reverse;
    animation: glitch-loop-2 .6s infinite ease-in-out alternate-reverse
}
@-webkit-keyframes glitch-loop-1 {
    0% {
        clip: rect(36px, 9999px, 9px, 0)
    }
    25% {
        clip: rect(25px, 9999px, 99px, 0)
    }
    50% {
        clip: rect(50px, 9999px, 102px, 0)
    }
    75% {
        clip: rect(30px, 9999px, 92px, 0)
    }
    100% {
        clip: rect(91px, 9999px, 98px, 0)
    }
}
@-webkit-keyframes glitch-loop-2 {
    0% {
        top: -1px;
        left: 1px;
        clip: rect(65px, 9999px, 119px, 0)
    }
    25% {
        top: -6px;
        left: 4px;
        clip: rect(79px, 9999px, 19px, 0)
    }
    50% {
        top: -3px;
        left: 2px;
        clip: rect(68px, 9999px, 11px, 0)
    }
    75% {
        top: 0;
        left: -4px;
        clip: rect(95px, 9999px, 53px, 0)
    }
    100% {
        top: -1px;
        left: -1px;
        clip: rect(31px, 9999px, 149px, 0)
    }
}
.gradientMenu {
    margin: auto;
    margin-top: 0;
    margin-bottom: 0;
    background: -webkit-linear-gradient(left, #46CADB, #D1D4AE, #AD487F, #43284F);
    background: -o-linear-gradient(right, #46CADB, #D1D4AE, #AD487F, #43284F);
    background: -moz-linear-gradient(right, #46CADB, #D1D4AE, #AD487F, #43284F);
    background: linear-gradient(to right, #46CADB, #D1D4AE, #AD487F, #43284F);
    height: 3px;
    width: 170px
}
.bannerSkills,
.infoBanner,
.nav_header {
    background-color: #000
}
.classBorder {
    border-bottom: 1px;
    border-style: solid;
    border-color: purple;
    display: flex;
    flex-direction: row;
}
body.open nav.menu {
    right: 0
}
.main_content {
    -webkit-transition: left .8s ease-out;
    -moz-transition: left .8s ease-out;
    -ms-transition: left .8s ease-out;
    -o-transition: left .8s ease-out;
    transition: left .8s ease-out;
    width: 90%;
    height: 500%;
    display: flex;
    position: absolute;
    flex-direction: column;
    right: 0;
    top: 0
}
.workListSidebar {
       left: 0;
    width: 50vw;
    height: 9%;
    position: fixed;
    margin: auto;
    top: 0;
    right: 0;
    z-index: 262;
    display: flex;   
}
.nav_header {
    flex: 1 2 1;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    display: inline-flex
}
.nav_header ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
    margin: auto
}
.logo_header {
    width: 10%;
    height: 100%
}
.logo_header img {
    display: flex;
    padding: 0;
    align-items: center;
    width: auto;
    height: 100%;
    flex-flow: row nowrap
}
.bloc-principal {
    flex-direction: column;
    display: flex
}
.nav_header.nav_header_open {
    height: 100%;
    border-width: 100% 0 0;
    background-color: rgba(0, 0, 0, .3);
    -webkit-transition: border-width .3s, background-color .3s;
    transition: border-width .3s, background-color .3s
}
.bloc-principal {
    width: 80%;
    height: 500%;
    justify-content: center;
    align-items: center
}
.works_category {
    width: 70%;
    height: 500px;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column
}
.glitch1 {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%
}
.logoLang .case span,
.photo {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}
.caseTitle {
    margin: auto;
    background-color:black;
    text-align: center;
}
.caseSubTitle {
    text-align: center;
}
 .workDesc,
.caseAlignRight {
    text-align: right
}
.logoBox,
.photo,
.titreBox {
    z-index: 2;
    position: absolute;
    right: 26px;
    bottom: -1px
}
.logoBox {
    width: 100%;
    z-index: 3;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    -webkit-transform: scale(calc(600px/800px));
    transform: scale(calc(600px/800px))
}
.logoBox img {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    top: 0;
    left: 0
}
.imgOpacityWorks,
.infoBanner,
.photo,
.tile,
.txt,
.welcomeBox {
    position: absolute
}
.imgOpacityWorks {
    align-items: center;
    width: 65%;
    height: 100%;
    z-index: 3
}
.login,
.photo,
.photo {
    top: 0;
    left: 0;
    transition: transform .5s ease-out;
    z-index: 1
}
.txt {
    z-index: 2;
    right: 0;
    bottom: 10%;
    left: 0;
    font-family: Quicksand, sans-serif;
    text-align: center;
    cursor: default
}
.webdsgnList li:hover,
.designerList li:hover {
    cursor: pointer
}
.welcomeBox {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row
}


.login {
    height: 100%;
    display: flex
}
.logoLang {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    width: 47%;
    height: auto;
    margin-left: 34px;
    color: #000
}
.logoLang .case {
    width: 56px;
    height: 40px;
    display: flex;
    justify-content: space-between
}
.logoLang .case p {
    margin: auto;
    color: #fff
}
.logoLang .case span {
    background-image: url(../image/arrowTime.png);
    width: 67%;
    height: 50%;
    margin: auto
}
.avenaBox1,
.cactusBox1,
.creationBox1,
.dazeBox1,
.golfBox1,
.luxconseilBox1,
.tennevilleBox1 {
    background-position: left
}
.avenaBox1,
.cactusBox1,
.creationBox1,
.dazeBox1,
.golfBox1,
.luxconseilBox1,
.luxconseilBox3,
.tennevilleBox1 {
    background-size: cover
}
.infoBanner {
    width: 100%;
    height: 70px;
    opacity: .7;
    display: flex;
    bottom: 0;
}
.infoBanner div {
    width: 100%;
    height: 100%;
    margin: auto;
    color: #fff;
    display: flex
}
.infoBanner div p {
    margin: auto;
    width: 95%;
    text-align: center
}
.socialBarred {
  width: 40%;
    display: flex;
    justify-content: space-evenly;
    margin: auto;
    margin-top: 0;
    margin-bottom: 0;
}
#socialIcon {
    width: 7vh;
    opacity: .5;
    display: flex;
    height: 7vh;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
}
#socialIcon img,
#socialIcon:hover {
    opacity: 1
}
.IndexIntro {
    display: flex;
    flex-direction: column;
    margin: auto;
}
#socialIcon img {
    height: 3vw;
}
.Bttn,
.BttnBlack {
    border-radius: 4px;
}
.Bttn {
    -webkit-transition: all .4s cubic-bezier(.39, .5, .15, 1.36);
    -moz-transition: all .4s cubic-bezier(.39, .5, .15, 1.36);
    -ms-transition: all .4s cubic-bezier(.39, .5, .15, 1.36);
    -o-transition: all .4s cubic-bezier(.39, .5, .15, 1.36);
    transition: all .4s cubic-bezier(.39, .5, .15, 1.36);
    padding: 2vh 4vh;
    color: #fff;
    box-shadow: #fff 0 0 0 2px inset;
    white-space: nowrap;
    margin: auto;
}
.Bttn h4,.BttnBlack h4{
  margin: 0
}
.envoyer {
    margin: auto
}
.BttnBlack {
    -webkit-transition: all .4s cubic-bezier(.39, .5, .15, 1.36);
    -moz-transition: all .4s cubic-bezier(.39, .5, .15, 1.36);
    -ms-transition: all .4s cubic-bezier(.39, .5, .15, 1.36);
    -o-transition: all .4s cubic-bezier(.39, .5, .15, 1.36);
    transition: all .4s cubic-bezier(.39, .5, .15, 1.36);
    padding: 15px 20px;
    color: #000;
    box-shadow: #000 0 0 0 2px inset;
    width: max-content;
    margin:auto;
}
#txtBttnGlow,
.bttnGlow {
    border-radius: 1vw;
    border-width: 0.3vw;
    border-color: rgba(255, 255, 255, .7);
    border-style: solid
}
#methodBttn {
    position: relative;
    margin: auto
}
.methodIndexBox {
    display: flex;
    margin: auto;
    width: 60%;
    height: 60%;
    flex-direction: column
}
#workBttn {
    width: max-content;
    margin: auto;
    margin-left: 0;
}
#contactBttn {
    position: absolute;
}
.logoDisplay {
    display: none
}
.Bttn:hover {
    color: #000;
    box-shadow: #fff 0 80px 0 2px inset
}
.BttnBlack:hover {
    color: #fff;
    box-shadow: #000 0 80px 0 2px inset
}
.bodyCase {
    margin: 0;
    justify-content: right;
    display: flex;
    background-color: black;
}
.interfaceRightBox #interfaceTxt,
.luxconseilBox1 p,
.workTxt p {
    font-family: Quicksand, sans-serif
}
.leftSideCommand {
    height: 100%;
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    justify-content: space-around;
}
.bannerSkills,
.luxconseilBox2 {
    flex-direction: row
}
.bannerSkills {
    width: 90%;
    position: absolute;
    height: 90px;
    right: 0;
    margin: 0;
    display: flex;
    z-index: 50
}
.bannerSkills div {
    width: 11.11%;
    height: 100%;
    display: flex;
    flex-direction: column-reverse
}
.bannerSkills div img {
    width: 50px;
    height: 50px;
    margin: auto
}
.bannerSkills div h2 {
    color: #fff;
    margin: auto;
    text-align: center
}
.cactusBox2,
.cactusBox4 {
    flex-direction: column
}
.textBlacky {
    color: #000
}
.avenaBox1 h2,
.cactusBox1 h2,
.creationBox1 h1,
.creationBox1 h2,
.dazeBox1 h1,
.dazeBox1 h2,
.golfBox1 h1,
.golfBox1 h2,
.luxconseilBox1 h2,
.luxconseilBox1 p,
.tennevilleBox1 div {
    color: #fff
}
.leftSideCommandH {
    box-shadow: #fff 300px 0 00px 2px inset;
    background-color: #fff
}
.leftSideCommand p {
    margin: auto;
    margin-top: 0;
}
.leftSideCommand li {
    text-decoration: none;
    margin: auto;
    width: -webkit-fill-available;
    height:33.33%;
    display: flex;
    flex-direction: column;
    color: #fff;
    -webkit-transition: all 580ms cubic-bezier(.49, .5, .15, .86);
    -moz-transition: all 580ms cubic-bezier(.49, .5, .15, .86);
    -ms-transition: all 580ms cubic-bezier(.49, .5, .15, .86);
    -o-transition: all 580ms cubic-bezier(.49, .5, .15, .86);
    transition: all 580ms cubic-bezier(.49, .5, .15, .86)
}
.leftSideCommand li a{
    color: white;
    display: flex;
    flex-direction: column;
    margin: auto;
}
.avenaBox1 {
    background-image: url(../image/avenaSativaBanner.png);
    background-repeat: no-repeat
}
.avenaBox1 h1,
.avenaBox1 h2 {
    margin: auto
}
.avenaBox1 div {
    margin: auto;  
    text-align: center
  }
.avenaBox2 img {
width: -webkit-fill-available;
}
.avenaBox2 h2{
    position: absolute;
        color: white;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 2vh;
    background-color: black;
  }
.tennevilleBox2 img {
    margin: auto;
    width: 100vh
}
.tennevilleBox2 h2 {
    position: absolute;
    color: black;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 2vh;
    background-color: gold;
}
.tennevilleBox1 div {
    margin: auto;
      text-align: center;
}
.avenaBox3 img {
    width: 50%;
    margin: auto
}
.tennevilleBox1 {
    background-image: url(../image/honeyBanner.jpg);
    background-repeat: no-repeat
}
.golfBox1 {
    background-image: url(../image/bannerMergolf.jpg);
    background-repeat: no-repeat
}
.golfBox1 div {
    margin: auto;
    text-align: center;
}
.golfBox2 h2 {
    position: absolute;
    margin: auto;
    text-align: center;
    width: 100%;
    top: 5vh;
}
.golfBox2 img,.golfBox3 img {
    margin: auto;
    width: -webkit-fill-available;
}
.creationBox1 {
    background-image: url(../image/reCreationBanner.png);
    background-repeat: no-repeat;
}
.creationBox1 div {
    margin: auto;    
    text-align: center;
  }
.cactusBox1 {
    background-image: url(../image/cactusBandeau.png);
    background-repeat: no-repeat
}
.cactusBox1 div,
.cactusBox2 {
    margin: auto;
    text-align: center
}
.cactusBox2 #luxLeft {
    margin: auto;
    width: 100%
}
.cactusBox2 #luxLeft h2 {
    margin: auto;
    width: 100%;
    text-align: center
}
.cactusBox2 #luxRight {
    width: 100%;
}
.cactusBox2 #luxRight img {
    margin: auto;
    max-width: 96vh;
    width: 37%
}
.cactusBox3 img{
     margin: auto;
    width: 90vh;
    top: 12vh;
    min-width: 343px;
    height: auto;
}
.cactusBox4 img,
.dazeBox2 {
    flex-direction: column
}
.cactusBox4 img {
    margin: auto;
    width: auto;
    height: 80%;
}
.dazeBox1 {
    background-image: url(../image/dazeRoof.jpg);
    background-repeat: no-repeat;
}
.disRowFlex{
  flex-direction: row;
  flex-wrap: wrap;
}
.dazeBox1 div {
    margin: auto;
    text-align: center
}
.reCrea1 img{
  width: 50%;
  height: 50%;
}
.reCrea1 h2{
position: absolute;
width: auto;
background-color: black;
color: white;
}
.reCrea3 h2{
position: absolute;
width: auto;
background-color: black;
color: white;
}
.luxconseilBox5 h2{
    position: absolute;
    width: auto;
    background-color: black;
    color: white;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 2vh;
}
.reCrea1 img:nth-child(2){
    background-color: rgba(245,173,29);
}
.reCrea1 img:nth-child(3){
    background-color: rgba(28,187,242);
}
.reCrea1 img:nth-child(4){
    background-color: rgba(245,138,31);
}
.reCrea1 img:nth-child(5){
       background-color: rgba(221,39,97);
}
.reCrea2{
background-color: rgba(245,138,31);
}
.reCrea2 img{
    width: -webkit-fill-available;
}
.reCrea3{
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.reCrea3 div{
    width: 50%;
    height: 50%;
    display: flex;
        min-width: 25vh;
        margin: auto;
            min-width: 340PX;
           background-color:aliceblue;
 }
.reCrea3 div img{
    height: 38vw;
    margin: auto;
}
.reCrea4 {
   display: flex;
}
.reCrea4 h2{
  position: absolute;
  background-color: black;
}
.reCrea4 img { 
    margin: auto;
    width:  -webkit-fill-available;
}
.shirtBackO{
background-color: rgba(245,173,29);
}
.dazeBox2 #dazeRight img {
    margin: auto;
    max-width: 96vh;
    width: 39%
}
.dazeBox2 #dazeRight {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.dazeBox2 #dazeLeft {
    margin: auto;
    width: 100%
}
.dazeBox2 #dazeLeft h2 {
    margin: 0;
    width: 100%;
    text-align: center;
    color: black;
}
.dazeBox3,
.dazeBox4 {
    flex-direction: column
}
.dazeBox3 img {
    margin: auto;
    width: 53%;
    top: 12vh;
    min-width: 343px;
    height: auto
}
.boxShadow{
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.dazeBox3 h2 {
    text-align: center
}
.dazeBox4 img ,.dazeBox5 img,.dazeBox8 img,.dazeBox7 img{
    margin: auto;
    width: -webkit-fill-available;
}
.flex-container-daze {
display: flex;
height: -webkit-fill-available;
   flex-direction: row;
    justify-content: space-between;
    width: -webkit-fill-available;
    margin: auto;
}
.flex-item-daze {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 60vh;
    justify-content: center;

}
.flex-container-daze img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    margin: auto;
}
.luxconseilBox1 {
    background-image: url(../image/start-ups.png);
    background-repeat: no-repeat;
}
.fujiBox1 {
    background-image: url(../image/csw110.jpg);
    background-repeat: no-repeat;
     background-size: cover;
}
.fujiBox1 div{ 
  margin: auto;
    text-align: center
}
.luxconseilBox3,
.luxconseilBox3 #pagePop,
.maBulleBox0 {
    background-position: center;
    background-repeat: no-repeat
}
.luxconseilBox1 p {
    background-color: rgba(0, 0, 0, .78);
    padding: 2vh;
    bottom: 0;
    margin: 0;
    left: 0;
    position: absolute;
    right: 0.
}
.luxconseilBox1 div {
    margin: auto;
    text-align: center.
}
.luxconseilBox2 div {
    margin: auto.
}
.luxconseilBox2 h2 {
    color: #000;
    width: 100%;
       top: 4vh;
    text-align: center;
    position: absolute;
}
.luxconseilBox2  img {
    margin: auto;
    width: 100%;
    top: 12vh;
    height: auto;
}
.pauliBox1  {
    width: auto;
    height: 100%;
    display: flex;
    margin: auto;
}
#luxRight,
.luxconseilBox2 #luxRight {
    width: 50%;
    height: 100%;
    display: flex
}
.luxconseilBox2 #luxRight #logoLuxconseil {
    width: 100%;
    height: 80%;
    margin: auto
}
.luxconseilBox3 {
    width: 100%;
    height: 100%;
    background-image: url(../image/templateSiteLux.jpg);
    margin: auto
}
.luxconseilBox3 #pagePop {
    width: 40%;
    top: 12vh;
    min-width: 343px;
    height: 80vh;
    background-image: url(../image/accountLogin.png);
    background-size: contain;
    margin: auto;
}
.luxconseilBox3 .webdesignTxtBox {
    position: absolute;
    width: 100%;
    top: 4vh;
    height: auto;
    text-align: center;
    z-index: 4
}
.sizeCaseBox {
    width: 100%;
    display: flex;
    color: white;
    position: relative;
}
.luxconseilBox4 {
    display: flex;
    flex-direction: row
}
.maBulleBox0,
.maBulleBox1 {
    flex-direction: column;
    display: flex
}
.luxconseilBox4 #luxLeft div {
    margin: auto
}
.LuxconseilIdentité {
  margin: auto;
    justify-content: center;
    display: flex;
}
.LuxconseilIdentité img {
    width: 100%
}
.luxconseilBox4 #luxLeft div h2 {
    text-align: center;

}
.luxconseilBox4 #luxRight {
    width: 50%;
    height: auto;
    display: flex;
    overflow:hidden;
    justify-content: center;
}
.luxconseilBox4 #luxLeft {
    width: 50%;
    display: flex;
}
.luxconseilBox4 #luxRight img {
    width: 100%;
    height: 100%
}
.maBulleBox1 {
    width: 100%;
    justify-content: center
}
.maBulleBox1 img {
width: -webkit-fill-available;
}
.maBulleBox0 {
    width: 100%;
    background-image: url(../image/ingredients.jpg);
    background-size: cover;
    justify-content: center
}
.maBulleBox0 div {
    color: #fff;
    margin: auto;
    text-align: center
}
.maBulleBox2 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column
        flex-direction: row;
    justify-content: space-around;
}
.maBulleBox2  img {
    width: -webkit-fill-available;
    margin: auto;
}
.maBulleBox3 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row
}
.maBulleBox3 .webLeft {
    display: flex
}
.maBulleBox3 .webLeft img {
    height: auto;
    width: 90%;
    margin: auto;
    max-height: 94vh
}
.maBulleBox3 .webRight img {
    height: auto;
    width: 58vh;
    margin: auto
}
.maBulleBox3 .webRight {
    display: flex
}
.maBulleBox4 {
    width: 64vw;
    display: flex;
    margin: auto;
    flex-direction: row-reverse;
        background-color: #f4216b;
}
.maBulleBox4 .webLeft,
.maBulleBox4 .webRight {
    width: 50%;
    height: 100%;
    display: flex;
}
.maBulleBox4 .webLeft div h2 {
    text-align: center;
    color: #fff;
}
.scrollPageBulle {
    width: 100%;
    height: auto;
    margin: auto;
    display: flex;
    justify-content: flex-end
}
.menuPageBulle {
    width: 100px;
    height: 49px;
    z-index: 19;
    margin: auto;
    position: absolute;
    background-color: #FC3891;
    display: flex
}
.bulleM {
    margin: auto;
    width: 70%;
    height: 100%
}
.bulleI {
    margin: auto;
    width: 30%;
    height: 70%
}
.bulleI>span:first-child {
    animation: 60s burgerCrossA
}
.bulleI>span:nth-child(2) {
    animation: 60s burgerCrossOut
}
.bulleI>span:nth-child(3) {
    animation: 60s burgerCrossB
}
.interfaceMenuBulle span:nth-child(1) {
    animation: 60s navSelectorBulle
}
.interfaceMenuBulle {
    width: 50%;
    z-index: 18;
    left: 0;
    position: absolute;
    height: 49px;
    background-color: #fff;
    display: flex;
    animation: 60s navPusherBulle
}
.interfaceMenuBulle span {
    margin: auto;
    color: #E2397A;
    width: 25%
}
.bulleI span {
    display: block;
    height: 2px;
    margin: 6px 4px 6px 0;
    width: 23px;
    background: #FFF;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
}
.iconLuxBox li,
.luxconseilBox4 #luxRight #smartphone,
.luxconseilBox7,
.maBulleBox5 .webRight,
.sliderLuxImg,
.smartWhite {
    background-position: center;
    background-repeat: no-repeat
}
.bulleSlideBox {
    height: 100%;
    width: 100%;
    flex-direction: column
}
.bulleSlideBox img {
    width: 100%;
    min-height: 100%;
    height: auto;
    margin: auto 0 auto auto
}
.imgBulleAccueil {
    position: relative;
    animation: 60s slidyE
}
.maBulleBox4 .webLeft div {
    width: 100%;
    height: 20%;
    margin: auto
}
.maBulleBox5 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row-reverse
}
.maBulleBox5 img {
    opacity: 1;
    transition: opacity 0.8s;
    margin: auto;
    width:-webkit-fill-available;
}
.maBulleBox5 .webLeft {
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: row
}
.maBulleBox5 .webLeft,
.maBulleBox5 .webRight {
    width: 50%;
    height: 100%;
   display: flex
}
.maBulleBox5 .webRight {
    background-image: url(../image/pinkMenu.jpg);
    background-size: cover
}
.maBulleBox5 .webLeft h2 {
    text-align: center;
    margin: auto;
    color: #f4216b
}
.smartWhite {
    width: 500px;
    height: 500px;
    margin: auto;
    background-image: url(../image/whiteSmart.png);
    background-size: cover;
    display: flex
}
.smartWhite img {
    margin: auto auto auto 29%;
    width: 45%
}
.luxconseilBox4 #luxRight #smartphone {
    width: 100%;
    height: 100%;
    background-image: url(../image/smartphoneLux.png);
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto 0 auto auto
}
#slideShowLux {
    position: absolute;
    width: 14.4vw;
    border-radius: 0 0 15px 15px;
    top: 26.3%;
    height: 50.4%;
    padding: 0;
    right: 16.35%;
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: column
}
#sliderLux,
.sliderLuxImg {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden
}
#sliderLux {
    padding: 0;
    margin: 0;
    display: initial
}
#sliderLux #pic1 {
    background-image: url(../image/phoneMenuLux.png)
}
#sliderLux #pic2 {
    background-image: url(../image/ressources.png)
}
#sliderLux #pic3 {
    background-image: url(../image/luxForm1.png)
}
.sliderLuxImg {
    margin: auto;
    animation: 25s slidyD infinite;
    background-size: cover
}
.luxconseilBox5 {
    display: flex;
    flex-direction: row
}
.luxconseilBox5 #luxRight div {
    margin: auto;
    width: 90%
}
.iconLuxBox {
    width: 85%;
    height: 85%;
    margin: auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between
}
.iconLuxBox li {
    width: 50%;
    height: 17%;
    background-size: contain;
    margin: auto;
    padding: 0
}
.iconLuxBox #expertise {
    background-image: url(../image/iconLux6.png)
}
.iconLuxBox #institution {
    background-image: url(../image/iconLux5.png)
}
.iconLuxBox #law {
    background-image: url(../image/iconLux4.png)
}
.iconLuxBox #assurance {
    background-image: url(../image/iconLux2.png)
}
.iconLuxBox #corporation {
    background-image: url(../image/iconLux3.png)
}
.luxconseilBox5 #luxLeft {
    background-color: #e51b24;
    width: 100%;
    height: 100%;
    margin: auto;
}
.luxconseilBox6 {
    flex-direction: column-reverse;
    display: flex
}
.luxconseilBox6 img {
    width: -webkit-fill-available;
    margin: auto; 
}
.luxconseilBox7 {
    display: flex;
}
.luxconseilBox7 img {
    margin: auto;
    width: -webkit-fill-available;
}
.luxconseilBox8 {
    flex-direction: column;
    display: flex
}
.videoFujiShop{
width: -webkit-fill-available;
}
.menuTxt{
    color: wheat;
    position: relative;
    right: 11vh;
    top: 0vh;
    bottom: 0;
}
.luxconseilBox8 {
    width: 100%;
    height: 100%;
    text-align: center
}
.logoInvisible {
    opacity: 0
}
.logoVisible {
    opacity: 1
}
.luxconseilBox8 #logBox {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background-image: url(../image/luxconseilPrint2.png);
    background-position: bottom;
    background-repeat: no-repeat;
    margin: auto
}
#cursorBottom,
.arrowGradBack,
.arrowGradLeft,
.arrowGradRight,
.spanCommandBack,
.spanCommandLeft,
.spanCommandRight {
    background-position: center;
    background-repeat: no-repeat
}
.cmmdSize {
display: flex;
    margin: auto;
    margin-bottom: 0;
}
.cmmdSize img {
margin: auto;
height: 4vw;
}
#indexBox2,
#indexBox3 {
    background-position: left
}
.leftSideMenu {
    width: 10%;
    height: 100%;
    position: fixed;
    background-color: #000;
    margin: 0;
    z-index: 55;
    left: 0;
}
#cursorBottom,
#txtBttnGlow,
.caseContainer {
    position: absolute
}
.caseContainer {
    width: 90%;
    display: flex;
    flex-direction: column;
    right: 0;
    margin: auto 0 auto auto;
    background-color: white;
}
#backgroundAnimate1 img:not(#galxyImg) {
    visibility: hidden
}
.bttnGlow {
    animation: glowing 5s infinite;    
    height: 3vw;
    width: 3vw;
    min-height: 10px;
    min-width: 10px;
    display: flex;
        margin: auto;
    position: relative;
    left: 0;
    right: 0;
}
#txtBttnGlow {
    bottom: 40px;
    right: 40px;
    min-height: 28px;
    min-width: 28px;
    display: flex
}
#cursorBottom {
    background-image: url(../image/cursorBottom.png);
    width: 2vw;
    height: 2vw;
    margin: auto;
    background-size: cover;
    animation: arrow .18s infinite;
    -webkit-animation: arrow 1.8s infinite;
    -moz-animation: arrow 1.8s infinite;
    -ms-animation: arrow 1.8s infinite;
    -o-animation: arrow 1.8s infinite;
    top: 50%;
    left: 21%
}
.cursorInter1V,
.cursorInter2V,
.visible {
    background-image: url(../image/cursorMenu.png)
}
@-webkit-keyframes arrow {
    0%,
    100% {
        top: 0
    }
    50% {
        top: 2vh
    }
}
@-moz-keyframes arrow {
    0%,
    100% {
        top: 0
    }
    50% {
        top: 2vh
    }
}
@-ms-keyframes arrow {
    0%,
    100% {
        top: 0
    }
    50% {
        top: 2vh
    }
}
back @-o-keyframes arrow {
    0%,
    100% {
        top: 0
    }
    50% {
        top: 10px
    }
}
@keyframes glowing {
    0% {
        box-shadow: 0 0 -10px rgba(255, 255, 255, .2)
    }
    40% {
        box-shadow: 0 0 20px rgba(255, 255, 255, .3)
    }
    60% {
        box-shadow: 0 0 20px rgba(255, 255, 255, .4)
    }
    100% {
        box-shadow: 0 0 -10px rgba(255, 255, 255, .4)
    }
}
.zoom {
    animation: scale 30s linear infinite
}
#containerBox #indexBox1{
    height: 100vh !important;
}
#containerBox .indexBox {
    position: relative;
    overflow: hidden;
    display: flex;
    padding-top: 11vw;
    padding-bottom: 11vw;
}
#workScreen1 {
    display: flex;
    justify-content: space-between
}
#workScreen2
{
    display: flex;
    flex-direction: row-reverse;
}
#workScreen4 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
#workScreen3 {
   display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.selectedCase,
.workDesc {
    display: flex;
    flex-direction: column
}
.selectedCase {
    margin: auto;
    width: 100%;
    height: 100%
}
.selectedCase h2 {
    margin: auto;
    width: 100%;
    text-align: center;
    color: white;
}
.infiniteslide_wrap{
    display: flex;
}
.selectedCaseBox {
bottom: 10vh;
    display: flex;
    left: 0;
    flex-direction: row;
    border-bottom: 2px;
    border-style: solid;
    border-color: rgba(78, 197, 215, 0.5);
    box-shadow: 0 4px 3px -1px rgba(255, 255, 255, 0.1);
    border-right: 0;
    border-left: 0;

}
.nineTitle{ 
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 18vh;
    position: absolute;
    bottom: 58vh;
    display: flex;
    color: blue;
    flex-direction: row;
    display: none;
}
.nineDesc{ 
    width: 100%;
    height: 18vh;
    position: absolute;
    bottom: -14vh;
    display: flex;
    color: white;
    flex-direction: row;
  
}
.nineDesc h5{
 margin: auto;
}
.nineTitle h3{
     margin: 0;
    margin: auto;
    width: 100%;
    text-align: center;
}
.backFujiIllu{
  background-color: white;
}
@keyframes caseScrolling{
 100% { 
    transform: translateX(-66.6666);  
  }
}
.selectedContainer img{
  height: 100%;
  width: 103%;
}
a .selectedContainer{
    height: 89.33%;
    display: flex;
     z-index: 690;
    position: relative;
}
.selectedCaseBox a {
  width: 73vh;
    height: 89.33%;
    display: flex;
    flex-direction: column;
    z-index: 690;
    position: relative;  
}
.workDesc,
.workTxt {
    height: auto;
    color: #fff;
    margin: auto
}
.nine2 {
    background-color: #ff0
}
.nine3 {
    background-color: purple
}
.nine4 {
    background-color: green
}
.nine5 {
    background-color: grey
}
#indexBox3,
.luxBttnBox {
    display: flex;
    width: 84%;
    margin: auto
}
.rightAlgn {
    justify-content: flex-end
}
.workDesc {
    width: 77vh;
    z-index: 510
}
.blocBottomIntro,
.workTxt {
    display: flex;
    flex-direction: column
}
.workTxt {
    width: 84%
}
.workTxt p {
    margin: auto;
}
.leftSide p {
    margin-left: 0
}
.rightSide p {
    margin-right: 0
}
.contents {
    height: 100%;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin:auto;
}
.blocBottomIntro {
    width: 100%;
    height: 20%;
    position: relative;
    margin: auto
}
#role{
    color: white;
    bottom: 2vh;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    bottom: 7vh;
    left: 6px;
     font-family: 'alienleaguecond.ttf';
}
#indexBox3,
#indexBox4,
#methodBox2 {
    display: flex;
    flex-direction: column;
    background-size: cover
}
@keyframes scale {
    50% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2)
    }
}
#indexBox2 {
    background-size: cover;
    display: flex;
    background-color:white;
}
#indexBox4,
#methodBox2 {
    background-color: #fff
}
.interfaceDetailsBox {
    background-color: #fff;
    background-size: cover;
    display: flex;
    flex-direction: column;
    width: 85%;
    height: 90vh;
    margin: auto
}
.interfaceMain {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: row;
    opacity: 1
}
.skillTitleSelect a {
    display: flex;
    color: inherit;
    width: 100%
}
.TitleSelectGrey {
    color: grey
}
.TitleSelectBlack {
    color: #000;
}
.skillTitleSelect #graphicDesigner,
.skillTitleSelect #webdevelopement {
    height: 100%;
    display: flex;
    flex-direction: row;
        transition: 0.5s;
}
.skillTitleSelect {
    width: 100%;
    height: 20%;
    display: flex;
    position: relative;
    border-bottom: 2px;
    justify-content: space-around;
    border-style: solid;
    border-color: #000;
    cursor: pointer
}
.cursorInter1,
.cursorInter1V,
.cursorInter2,
.cursorInter2V,
.skillTitleSelect div .cursor2 {
    background-position: center;
    background-size: contain;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat
}
.contactForm input,
.inputFlex {
    border-top: 0;
    border-right: 0;
    border-left: 0
}
.cursorInter1,
.cursorInter2,
.skillTitleSelect div .cursor2 {
    margin: auto;
}
.cursorInter1V {
    margin: auto;
}
.cursorInter2V {
    margin: auto 0;
}
.skillTitleSelect div h3 {
    margin: auto;
flex-grow: 1;
}
.webdsgnList li,
.designerList li {
    height: auto;
    width: 100%;
    transition: 0.5s;
}
.designerList li {
 
    display: flex
}
.interfacePopOut {
    display: none
}
.webdsgnList li {
    display: flex
}
.webdsgnList li h4,
.designerList li h4 {
    width: 80%;
    margin: auto
}
ul {
    display: flex
}
.contactUsBloc {
    height: 100vh;
    width: 100%;
    margin: auto auto auto 0;
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, .8);
    z-index: 1
}
#blackFilter,
.iconSkills,
.pauliBox5 .right {
    background-color: #000
}
.contactUsBlocCenter {
    width: 80%;
    height: 80%;
    margin: auto
}
.contactBox {
    height: auto;
    width: 100%;
    display: flex;
    top: 18vh;
    position: absolute
}
.contactTitle {
    text-align: center
}
.contactUs {
    width: 100%;
    height: 100%;
    margin: auto;
    justify-content: flex-end
}
.invisible,
.visible {
    width: 24px;
    height: 24px;
    margin: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}
.visible {
    transition: .5s;
    transform: translateX(50%)
}
#coordinated {
    width: 100%;
    height: auto;
    display: flex;
    margin: 0;
    margin-top: 2vw;
    bottom: 2vh;
    color: #fff;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
#coordinated a {
    transition: all .2s ease;
    color: #46CADB
}
#coordinated h5 {
margin: 0;
}
.socialMenuBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 2vh;
    justify-content: space-evenly
}
.socialMenuBox h4{
  margin: auto;
  margin-top: 0;
  margin-bottom: 2vw;
  color: white;
}
.interfaceRightBox {
    width: 87%;
    height: 100%;
    position: absolute;
    margin: auto;
  }
.interfaceIcon {
    width: 30%;
    height: 20%;
    display: flex;
}
.interfaceIcon div {
    background-size: contain;
    background-position: center;
    width: 4vw;
    height: 7vh;
    margin-top: auto;
    margin-bottom: auto;
    background-repeat: no-repeat;
        transition: 0.5s;
}
.interfaceRightBox #interfaceTxt {
    color: #000;
    height: 80%;
    width: 90%;
}
.skillsCont {
    padding: 0;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    color: white;
}
#leftSection,
.iconSkills {
    flex-direction: column;
    display: flex
}
.LuxconseilVid{
  width: 110%;
  height: 100%;
}
.iconSkills {
    width: 25%;
    height:23vh;
    background-size: cover;
    background-position: center
}
.skillImg {
    width: 25%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: auto;
    display: flex;
}
.pauliBox0,
.pauliBox1 #luxRight #pauliIntro #instruments,
.pauliBox1 #luxRight #pauliIntro #organ {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}
.iconSkills span {  
    text-align: center
}
.iconSkills span h4{  
    margin: 0;
}
#skillImg1 {
  display: flex;
}
.skillImg img {
    margin: auto;
    width: 100%;
}
#leftSection {
    width: 50%;
    height: 100%;
    justify-content: center
}
.centered {
    width: 70%;
    flex-direction: column;
    justify-content: center;
    display: flex;
    margin: auto; 
}
#rightSection {
    width: 50%;
    height: 100%;
    display: flex;
    align-content: center
}
.navList li{
    margin-bottom: 1vw;
    margin-top: 1vw;
}
#presentBox {
    width: 100%;
    display: flex;
    justify-content: flex-end
}
#boxPhotowall {
   opacity: 1;
    display: flex;
  
}
#subContainer {
width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
     flex: 50%;
  max-width: 50%;
  padding: 0 4px;
}
#subContainer img {
    margin-top: 8px;
    vertical-align: middle;
    height: 23vw;
    width: 100%;
}
#subContainerSecond {
    height: 100%;
    display: flex
}
.pauliBox0 {
    display: flex;
    flex-direction: row;
    align-content: center;
    background-image: url(../image/pauliphonicOrganIntro.jpg)
}
.pauliBox0 div {
    margin: auto;
    text-align: center;
    color: #fff;
  }
.pauliBox1 {
justify-content: space-around;
    display: flex;
    width: 210vh;
    flex-direction: row;
    align-content: center;
}
.pauliBox1 #luxLeft div {
    width: 100%;
    margin: auto
}
.pauliBox1 h2 {
    margin: auto;
    text-align: center
}
.pauliBox1 #luxRight {
    width: 50%
}
.pauliBox1 #pauliIntro {
    width: 90%;
    height: 80%;
    flex-direction: column;
    align-items: center;
    display: flex;
    margin: auto
}
.pauliBox1  #pauliIntro .bannerIni {
    width: 100%;
    height: 50%;
    margin: auto
}
.pauliBox1  #pauliIntro .bannerIni div {
    width: 100%;
    height: 100%;
    margin: auto
}
.pauliBox1 #pauliIntro #instruments {
    background-image: url(../image/pauliBannerInstruments.png);
    opacity: 1;
    animation: flickerAnimation 14s infinite
}
.pauliBox1  #pauliIntro #organ {
    background-image: url(../image/pauliBannerOrgan.png);
    opacity: 1;
    animation: flickerAnimationB 14s infinite
}
.pauliBox1  #pauliIntro div {
    background-image: url(../image/pauliIntro2.jpg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}
@keyframes flickerAnimation {
    0%,
    100% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}

@keyframes flickerAnimationB {
    0%,
    100% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}
.pauliBox2 {
    display: flex;
    width: 100%
}
.pauliBox2 img {
    width: 60%;
    max-height: 100vh;
    height: auto;
    margin: auto
}
.pauliBox2 #luxRight {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-content: center
}
.pauliBox3 {
    width: 100%;
    height: 100%;
 
}
.pauliBox3 h2 {
    top: 2vh;
    position: absolute;
    margin: auto;
    text-align: center;
    width: 100%;
    color: black;
}
#centerCase img:nth-child(1),
#slider3,
#txtDiv2B,
.cursorBloc,
.cursorBloc2,
.slider3Img {
    position: relative
}
.pauliBox3 .left,
.pauliBox3 .right {
    width: 50%;
    height: 100%;
    display: flex;
    margin: auto
}
.pauliBox3 .left img,
.pauliBox3 .right img {
    width: 80%;
    height: auto;
    margin: auto;
    box-shadow: 1px 1px 12px #555
}
.pauliBox4 {
    width: 100%;
    height: 100%;
    display: flex
}
.pauliBox4 img {
    width: 100vh;
    height: auto;    
    display: flex;
    margin: auto;
    box-shadow: 1px 1px 12px #555;
}
.pauliBox5,
.pauliBox5 .left {
    height: 100%;
   display: flex
}
.pauliBox4 .left h2 {
    width: 100%;
    margin: auto;
    text-align: center
}
.pauliBox5 {
    width: 100%;
    top: 0
}
.pauliBox5 .left ul {
    width: 80%;
    position: relative;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    padding: 0;
    bottom: 0;
    margin: auto
}
#backgroundAnimate1,
#backgroundAnimate1 img,
#blackFilter {
    position: absolute;
    height: 100%
}
.pauliShopScroll {
    animation: 40s pauliShopScroll
}
.pauliBox5 .left ul li {
width: 100%;
    height: auto;
    margin: auto;
    display: flex;
    margin-top: 1vw;
    margin-bottom: 1vw;
}
.pauliBox5 .left li img {
    width: 80%;
    margin: auto;
    height: auto
}
.pauliBox5 .right {
    height: 100%;
    display: flex
}
#blackFilter {
    width: 100%;
    z-index: 330;
    opacity: 0.5;
}
.galxyVideo{
  width: 100vw;
  margin: auto;  
}
#backgroundAnimate1 {
    width: 100%;
    top: 0;
    z-index: -1;
    display: flex;
    justify-content: center;
}
#backgroundAnimate1 img {
    min-width: 100vw;
}
#backgroundAnimate1 #colorBurner {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: colorBurner 27s infinite;
    animation-delay: 13s
}
#backgroundAnimate1 #galxyImg {
    animation: galxyOne 27s infinite;
    animation-delay: 13s
}
#backgroundAnimate1 #galxyImgGlitch1 {
    animation: galxygltichOne27s infinite;
    animation-delay: 13s
}
#backgroundAnimate1 #galxyImgGlitch2 {
    animation: galxygltichTwo 27s infinite;
    animation-delay: 13s
}
#backgroundAnimate1 #tropicAnti {
    animation: galxygltichThree 27s infinite;
    animation-delay: 13s
}
#backgroundAnimate1 #tropicImg {
    animation: tropicana 27s infinite;
    animation-delay: 13s
}
#backgroundAnimate1 #tropicanaZero {
    animation: galxyZero 47s infinite;
    animation-delay: 13s
}
#backgroundAnimate1 #liegeBueren {
    animation: BuerenGlitch 27s infinite;
    animation-delay: 13s
}
#backgroundAnimate1 #liegeBueren1 {
    animation: BuerenOne27s infinite;
    animation-delay: 13s
}
#backgroundAnimate1 #liegeBueren2 {
    animation: BuerenTwo 27s infinite;
    animation-delay: 13s
}
@keyframes galxyOne {
    0% { opacity: 1 }
   
    30.8% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 1
}
    100%{opacity: 1;}
    
}
@keyframes slidyD {
    0%,
    8.3% {
        top: 0
    }
    16.63%,
    24.93% {
        top: -100%
    }
    33.23%,
    41.53%,
    49.83%,
    58.13% {
        top: -200%
    }
    66.43%,
    74.73%,
    83.03% {
        top: -100%
    }
    100%,
    91.33% {
        top: 0
    }
}
@keyframes slidyE {
    0%,
    10%,
    20%,
    30%,
    40%,
    45% {
        top: 0
    }
    49.83%,
    55.83%,
    60.83%,
    70.83%,
    80.83%,
    90.83%,
    95.83% {
        top: -100%
    }
    100% {
        top: 0
    }
}
@keyframes navSelectorBulle {
    0%,
    10%,
    20%,
    30%,
    40%,
    45% {
        color: #E2397A
    }
    49.83% {
        color: #BA0859
    }
    100%,
    50.83%,
    60.83%,
    70.83%,
    80.83%,
    90.83%,
    95.83% {
        color: #E2397A
    }
}
@keyframes navPusherBulle {
    0%,
    10%,
    20%,
    30%,
    40% {
        left: 100%
    }
    45%,
    49.83%,
    50.83%,
    60.83%,
    70.83%,
    80.83% {
        left: 50%
    }
    100%,
    90.83%,
    95.83% {
        left: 100%
    }
}
@keyframes burgerCrossA {
    40% {
        -webkit-transform: translateY(0) rotate (0) scaleX(1);
        -ms-transform: translateY(0) rotate(0) scaleX(1);
        transform: translateY(0) rotate(0) scaleX(1)
    }
    45%,
    46.83%,
    89.83% {
        -webkit-transform: translateY(8px) rotate (45deg) scaleX(1.1);
        -ms-transform: translateY(8px) rotate(45deg) scaleX(1.1);
        transform: translateY(8px) rotate(45deg) scaleX(1.1)
    }
    90.83% {
        -webkit-transform: translateY(0) rotate (0) scaleX(1.1);
        -ms-transform: translateY(0) rotate(0) scaleX(1.1);
        transform: translateY(0) rotate(0) scaleX(1.1)
    }
}
@keyframes burgerCrossB {
    40% {
        -webkit-transform: translateY(0) rotate (0) scaleX(1);
        -ms-transform: translateY(0) rotate(0) scaleX(1);
        transform: translateY(0) rotate(0) scaleX(1)
    }
    45%,
    46.83%,
    89.83% {
        -webkit-transform: translateY(-8px) rotate (-45deg) scaleX(1.1);
        -ms-transform: translateY(-8px) rotate(-45deg) scaleX(1.1);
        transform: translateY(-8px) rotate(-45deg) scaleX(1.1)
    }
    90.83% {
        -webkit-transform: translateY(0) rotate (0) scaleX(1.1);
        -ms-transform: translateY(0) rotate(0) scaleX(1.1);
        transform: translateY(0) rotate(0) scaleX(1.1)
    }
}

@keyframes burgerCrossOut {
    0%,
    10%,
    20%,
    30%,
    40% {
        opacity: 100
    }
    45%,
    49.83%,
    50.83%,
    60.83%,
    70.83%,
    89.93% {
        opacity: 0
    }
    100%,
    90.83%,
    95.83% {
        opacity: 100
    }
}

@keyframes pauliShopScroll {
    0% {
        bottom: 0
    }
    10% {
        bottom: 40%
    }
    20% {
        bottom: 80%
    }
    30% {
        bottom: 120%
    }
    40% {
        bottom: 160%
    }
    45% {
        bottom: 180%
    }
    50.83% {
        bottom: 200%
    }
    60.83% {
        bottom: 180%
    }
    70.83% {
        bottom: 160%
    }
    89.93% {
        bottom: 120%
    }
    90.83% {
        bottom: 80%
    }
    95.83% {
        bottom: 40%
    }
    100% {
        bottom: 0
    }
}
#slider3 {
    width: 100%;
    overflow: hidden;
    height: 250%;
    padding: 0;
    margin: 0;
    display: flex;
    box-sizing: content-box;
    flex-direction: column
}
.slider3Img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center
}
.boxTitle {
    width: 100%;
    height: 50px;
}
#txtDiv2,
#txtDiv2B {
    margin: auto;
    font-family: Quicksand, sans-serif;
}
#subBox {
    color: #000
}
#txtDiv2B {
    width: 80%;
    text-align: center;
    color: #fff;
    display: flex;
}
#txtDiv2 {
    margin-bottom: 2vw;
    text-align: left;
     font-family: Quicksand, sans-serif;
}
#txtDiv2 p {
    margin: auto
}
#txtDiv3 {
    max-width: 442px;
    height: auto;
    font-family: Quicksand, sans-serif;
    text-align: left;
    color: #fff;
   }
#TextSection2 {
    width: 50%;
    height: 100%;
    background-color: orange
}
#loginform {
    width: 300px;
    height: 203px;
    background-repeat: no-repeat;
    padding: 40px 15px 5px 48px;
    position: absolute;
    top: 0;
    left: 0
}
#glow {
    background: url(../image/ice.jpg);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}
.blocTitleBlack,
.blocTitleBlack2 {
    background-color: #000;
    position: absolute
}
.blocTitleBlack {
    height: 55px;
    width: 300px;
    top: 234px
}
.blocTitleBlack2 {
    height: 55px;
    width: 320px;
    top: 305px;
    left: 75px
}
.blocTitleBlack h2,
.blocTitleBlack2 h2 {
    color: #fff;
    position: absolute;
    height: 55px;
    width: 320px;
    left: 5%;
    top: -12px
}
.hidden {
    opacity: 0
}
.code_terminal {
    color: #fff;
       display: flex;
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-shadow: 0 0 6px rgba(255, 255, 255, .75);
    margin: auto
}
.code_terminal2,
.code_terminal3 {
    -webkit-box-align: center
}
.code_terminal2 {
    color: #000;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    top: 0;
    display: flex;
    justify-content: left;
}
.code_terminal2 h1 {
margin: auto;
margin-left: 1vh;
}
.code_terminal2 span {
    height: 100%;
    word-break: break-word
}
.code_terminal3 {
    color: #fff;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin: auto;
    flex-wrap: wrap;
    text-shadow: 0 0 2px rgba(255, 255, 255, .75)
}
.code_terminal4,
.code_terminal5 {
    -webkit-box-align: center;
    width: 100%
}
.code_terminal4 {
    color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin: auto;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    top: 19%
}
.blink_me {
  animation: blinker 6s linear infinite;
  background-color: black;
}
.blink_me2 {
  animation: blinker 6s linear infinite;
  animation-delay: 3.0s;
  background-color: black;
} 
@keyframes blinker {
    0% {   
   background-color: black;
  }
   20% {   
   background-color: black;
  }
  21% {  
   background-color: blue;
  }
  65% {
  
   background-color: blue;
  }
    66% {
  
   background-color: black;
  }
  100% {
  
   background-color: black;
  }
}
.code_terminal5 {
    color: #fff;
    display: flex;
    -ms-flex-align: center;
    margin: 0 0 0 22px;
    flex-wrap: wrap;
    height: 100%;
    text-shadow: 0 0 5px rgba(255, 255, 255, .7)
}
.code_terminal6 {
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: auto;
    flex-wrap: wrap; 
    text-shadow: 0 0 2px rgba(255, 255, 255, .5)
}
.code_terminal10 {
    color: black;
    font-size: 8vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: auto;
    flex-wrap: wrap;
    text-shadow: 0 0 2px rgba(255, 255, 255, .5)
}
.code_terminal12 {
      color: #fff;
    -ms-flex-align: center;
    flex-wrap: wrap;
    height: 100%;
    text-shadow: 0 0 5px rgba(255, 255, 255, .7);
}
.postMessage{
  color: cornflowerblue;
}
.typed-cursor {
    opacity: 1;
    word-wrap: break-word;
    font-weight: 100;
    -webkit-animation: blink .7s infinite;
    animation: blink .7s infinite
}
@-webkit-keyframes blink {
    0%,
    100% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}
@keyframes blink {
    0%,
    100% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}
.BttnBloc{
  display: flex;
}
.cursorBloc {
    display: flex;
}
.cursor {
    width: 20px;
    margin-left: 14px;
    top: 33px;
    display: flex;
}
.cursorImg {
    width: 3vh;
    height: 3vh;
    margin: auto;
}
.console-underscore {
    display: inline-block;
    position: relative;
    top: -.14em;
    left: 10px
}
.contactForm p {
    width: 77vw;
    margin: auto;
    text-align: center;
}
.contactForm,
.contactForm input {
    font-family: 'alienleaguecond.ttf';
    text-align: left;
  
}
.worksContainer {
    position: absolute;
    width: 100%;
    right: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    top: 0;
    z-index: -4;
    padding-top: 11vw;
}
.contactUs {
    display: flex;
    flex-direction: column
}
.contactForm {
    margin: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap
}
.fieldsetSplit {
    display: flex;
    flex-direction: row;
    height: 500px;
    width:82vw;
    margin:auto;  
}
.inputGrow{
        flex-grow: 1;
    }
.contactForm input {
    border-bottom: 0;
    color: #fff;
    outline: 0;
    position: relative;
    background-color: unset
}
.contactForm .formPrice,
.contactForm .formSet {
    border: none;
    display: flex;
    flex-direction: row;
    margin: auto
}
.contactForm .submit {
    width: auto
}
.contactForm input::-webkit-input-placeholder {
    font-family: 'alienleaguecond.ttf';
    font-family: 28px
}
.contactForm .formPrice {
    width: 100%;
}
.contactForm .formSet {
    width: 37%;
}
.contactForm .fieldTxt,
.contactForm .sendSet {
    border: none;
    flex-direction: row;
    display: flex
}
.contactForm .sendSet {
    width: 100%;
    height: 170px
}
[required] {
    border: 2px dotted orange
}
.inputFlex {
    border-bottom: 1px;
    border-style: solid;
    border-color: #fff;
    display: flex; 
    flex-direction: row;
    line-height: 8vh;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;    
}
.inputFlexPurple {
    border-bottom: 1px;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-style: solid;
    border-color: purple;
    box-shadow: 0 5px 2px -2px rgba(81, 203, 238, 1);
    margin: 10px
}
#inputContact #contact {
    width: 40%
}
.inputFlex .arrow {
    background-image: url(../image/arrowTime.png);
    height: 2.5vh;
    width: 3.5vh;
    margin: auto;
    margin-left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}
::-webkit-input-placeholder {
    color: #fff
}

:-ms-input-placeholder {
    color: #fff
}
::-moz-placeholder {
    color: #fff;
    opacity: 1
}
:-moz-placeholder {
    color: #fff;
    opacity: 1
}
#inputContact {
    width: 100%
}
#inputContact input {
    width: 50%
}
.feedback-input {
height: 240px;
    font-family: 'alienleaguecond.ttf';
    width: 100%;
    background-color: transparent;
      color: white;
    font-size: 24px;
    border-bottom: 1.5px;
    border-top: 1.5px;
    border-right: 0;
    border-left: 0;
    border-style: solid;
    border-color: rgba(78, 197, 215, 0.5);
    margin: auto; 
}
#centerCase,
#centerCase img {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
.feedback-input:focus {  
  outline: none; 
     box-shadow: 0px 2px 5px 0px rgba(81, 203, 238, 1);
}
article img {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center
}
#centerCase {
    display: flex;
    overflow: hidden
}
#centerCase img {
    opacity: 0
}
#centerCase img:nth-child(1) {
    opacity: 1
}
#centerCase img:nth-child(2) {
    -webkit-animation: imgTransisA 45s;
    animation-iteration-count: infinite
}
#centerCase img:nth-child(3) {
    -webkit-animation: imgTransisB 45s;
    animation-iteration-count: infinite
}
#centerCase img:nth-child(4) {
    -webkit-animation: imgTransisC 45s;
    animation-iteration-count: infinite
}
#centerCase img:nth-child(5) {
    -webkit-animation: imgTransisD 45s;
    animation-iteration-count: infinite
}
#centerCase img:nth-child(6) {
    -webkit-animation: imgTransisE 45s;
    animation-iteration-count: infinite
}
#centerCase img:nth-child(7) {
    -webkit-animation: imgTransisF 3.7s infinite ease-in-out alternate-reverse
}
#centerCase img:nth-child(8) {
    -webkit-animation: imgTransis 4.7s infinite ease-in-out alternate-reverse;
    animation-delay: 34s
}
@-webkit-keyframes imgTransisA {
    0%,
    10.9% {
        opacity: 0
    }
    11% {
        opacity: 1
    }
    11.5%,
    17% {
        opacity: 0
    }
    17.5% {
        opacity: 1
    }
    100%,
    18% {
        opacity: 0
    }
}
@-webkit-keyframes imgTransisB {
    0%,
    23.9% {
        opacity: 0
    }
    24%,
    24.5% {
        opacity: 1;
        left: 5%
    }
    24.6% {
        opacity: 0;
        left: 0
    }
    100% {
        opacity: 0
    }
}
@-webkit-keyframes imgTransisC {
    0%,
    40.9% {
        opacity: 0
    }
    41.4%,
    41.9% {
        opacity: 1
    }
    100%,
    42% {
        opacity: 0
    }
}
@-webkit-keyframes imgTransisD {
    0%,
    46.7% {
        opacity: 0
    }
    46.9% {
        opacity: 1;
        left: 2%
    }
    47.0% {
        opacity: 0
    }
    47.1% {
        opacity: 1;
        left: -5%
    }
    47.3% {
        opacity: 0
    }
    47.5% {
        opacity: 1;
        left: -4%;
        top: 7%
    }
    47.8% {
        opacity: 0
    }
    48.1% {
        opacity: 1;
        left: -4%;
        top: -7%
    }
    48.3% {
        opacity: 0;
        left: unset;
        top: unset
    }
    100% {
        opacity: 0
    }
}
@-webkit-keyframes imgTransisE {
    0% {
        opacity: 0
    }
    53.0% {
        opacity: 0;
        left: 0;
        top: 0
    }
    53.4% {
        opacity: 1;
        left: 1%;
        top: 4%
    }
    53.9% {
        opacity: 0;
        left: 0;
        top: 0
    }
    100% {
        opacity: 0
    }
}
@-webkit-keyframes imgTransisF {
    0% {
        opacity: 0;
        left: 0;
        top: 0,
    }
    54.0% {
        opacity: 0;
        left: 0;
        top: 0
    }
    54.4% {
        opacity: 1;
        left: 1%;
        top: 4%
    }
    54.6% {
        opacity: 1;
        left: 5%;
        top: -2%
    }
    55.2% {
        opacity: 0;
        left: 0;
        top: 0
    }
    55.9% {
        opacity: 1;
        left: 0;
        top: 0
    }
    56.3% {
        opacity: 0;
        left: 0;
        top: 0
    }
    100% {
        opacity: 0
    }
}
.navigationSkill{
    justify-content: space-between;
    padding-top: 11vw;
}
.containerSkillNav{
    background-color: white;
}
.contentSkillText{
    min-height: 44vw;
}
.contentSkillText p{
    color: black;
    font-family: Quicksand, sans-serif;
}
.nav-item{
    margin-right: 2vw;
    cursor: pointer;
    opacity: 0.5;
    transition: 0.3s;
    border-bottom: solid 0.3vw white;
}
.nav-item:hover{
opacity: 1;
border-bottom: solid 0.3vw black;
}
.nav-item img{
    height: 4vw;
    margin: auto;
}
.hoverSkill{
    display: flex;
    height: 5vw;
    padding-top: 3vw;
}
.hoverSkill h4{
    margin: auto;
    color: black;
    margin-left: 0;
}
#worksBox .indexBox,.caseContainer  .indexBox:not(:nth-child(1)){
    height: auto !important;
}
.caseContainer .indexBox:nth-child(1) .sizeCaseBox:nth-child(1){
    height: 100vh;
    overflow: hidden;
}
.frontImage{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    margin: auto;
    z-index: -1;
}
.sizeCaseBox div{
        margin: auto;
    text-align: center;
    color: #fff;
}
.ciseauxBack{
    flex-direction: row;
    flex-wrap: wrap;
}
.ciseauxBack img{
    width: 50%;
}
@media all and (min-height:0px) and (max-height:500px) {
    .tile{
        opacity: 0.6;
    }
    .leftSideMenu p{
      display: none;
    }
    .cmmdSize{
      margin:auto;
    }
}