#app{font-family:Avenir,serif,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}body{font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif;background:black no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}body#Project.html{background:url() no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}ul{list-style-type:none;margin:0;padding:0;width:200px;background-color:#f1f1f1}li a{display:block;color:#000;padding:8px 0 8px 16px;text-decoration:none}li a:hover{background-color:#555;color:#fff}h1,h2,h3,p{text-align:center}.Le_menu{margin:100px auto;width:80%;height:100px;background:#000}.Le_menu .Toutes_les_pages{display:flex;justify-content:space-around;align-items:center}.Le_menu .Toutes_les_pages a{width:100%;display:flex;align-items:center;justify-content:center;height:100px;text-decoration:none;font-family:Roboto,sans-serif;color:#fff}.Le_menu a:hover{background:#5c566b}.progress{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #05e35e;height:30px}.progress .progress__bar{height:100%;width:0%;background-color:#05e35e;animation:fill-bar 3s linear forwards}@keyframes fill-bar{0%{width:0%}to{width:10%}}.progress1{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #05e35e;height:30px}.progress1 .progress__bar1{height:100%;width:0%;background-color:#05e35e;animation:fill-bar1 3s linear forwards}@keyframes fill-bar1{0%{width:0%}to{width:20%}}.progress2{margin:50px auto;padding:2px;width:90%;max-width:500px;border:3px solid #05e35e;height:30px}.progress2 .progress__bar2{height:100%;width:0%;background-color:#05e35e;animation:fill-bar2 3s linear forwards}@keyframes fill-bar2{0%{width:0%}to{width:30%}}.progress3{margin:50px auto;padding:2px;width:90%;max-width:500px;border:3px solid #05e35e;height:30px}.progress3 .progress__bar3{height:100%;width:0%;background-color:#05e35e;animation:fill-bar3 3s linear forwards}@keyframes fill-bar3{0%{width:0%}to{width:40%}}.progress4{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #05e35e;height:30px}.progress4 .progress__bar4{height:100%;width:0%;background-color:#05e35e;animation:fill-bar4 3s linear forwards}@keyframes fill-bar4{0%{width:0%}to{width:50%}}.progress5{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #05e35e;height:30px}.progress5 .progress__bar5{height:100%;width:0%;background-color:#05e35e;animation:fill-bar5 3s linear forwards}@keyframes fill-bar5{0%{width:0%}to{width:60%}}.progress6{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #05e35e;height:30px}.progress6 .progress__bar6{height:100%;width:0%;background-color:#05e35e;animation:fill-bar6 3s linear forwards}@keyframes fill-bar6{0%{width:0%}to{width:70%}}.progress7{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #05e35e;height:30px}.progress7 .progress__bar7{height:100%;width:0%;background-color:#05e35e;animation:fill-bar7 3s linear forwards}@keyframes fill-bar7{0%{width:0%}to{width:80%}}.progress8{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #05e35e;height:30px}.progress8 .progress__bar8{height:100%;width:0%;background-color:#05e35e;animation:fill-bar8 3s linear forwards}@keyframes fill-bar8{0%{width:0%}to{width:90%}}.progress9{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #05e35e;height:30px}.progress8 .progress__bar9{height:100%;width:0%;background-color:#05e35e;animation:fill-bar9 3s linear forwards}@keyframes fill-bar9{0%{width:0%}to{width:100%}}.progressr{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #ff0000;height:30px}.progressr .progress__barr{height:100%;width:0%;background-color:red;animation:fill-barr 3s linear forwards}@keyframes fill-barr{0%{width:0%}to{width:10%}}.progress1r{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #ff0000;height:30px}.progress1r .progress__bar1r{height:100%;width:0%;background-color:red;animation:fill-bar1r 3s linear forwards}@keyframes fill-bar1r{0%{width:0%}to{width:20%}}.progress2r{margin:50px auto;padding:2px;width:90%;max-width:500px;border:3px solid #ff0000;height:30px}.progress2r .progress__bar2r{height:100%;width:0%;background-color:red;animation:fill-bar2r 3s linear forwards}@keyframes fill-bar2r{0%{width:0%}to{width:30%}}.progress3r{margin:50px auto;padding:2px;width:90%;max-width:500px;border:3px solid #ff0000;height:30px}.progress3r .progress__bar3r{height:100%;width:0%;background-color:red;animation:fill-bar3r 3s linear forwards}@keyframes fill-bar3r{0%{width:0%}to{width:40%}}.progress4r{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #ff0000;height:30px}.progress4r .progress__bar4r{height:100%;width:0%;background-color:red;animation:fill-bar4r 3s linear forwards}@keyframes fill-bar4r{0%{width:0%}to{width:50%}}.progress5r{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #ff0000;height:30px}.progress5r .progress__bar5r{height:100%;width:0%;background-color:red;animation:fill-bar5 3s linear forwards}@keyframes fill-bar5r{0%{width:0%}to{width:60%}}.progress6r{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #ff0000;height:30px}.progress6r .progress__bar6r{height:100%;width:0%;background-color:red;animation:fill-bar6r 3s linear forwards}@keyframes fill-bar6r{0%{width:0%}to{width:70%}}.progress7r{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #ff0000;height:30px}.progress7r .progress__bar7r{height:100%;width:0%;background-color:red;animation:fill-bar7r 3s linear forwards}@keyframes fill-bar7r{0%{width:0%}to{width:80%}}.progress8r{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #ff0000;height:30px}.progress8r .progress__bar8r{height:100%;width:0%;background-color:red;animation:fill-bar8r 3s linear forwards}@keyframes fill-bar8r{0%{width:0%}to{width:90%}}.progress9r{margin:50px auto;padding:2px;width:100%;max-width:500px;border:3px solid #ff0000;height:30px}.progress9r .progress__bar9r{height:100%;width:0%;background-color:red;animation:fill-bar9r 3s linear forwards}@keyframes fill-bar9r{0%{width:0%}to{width:100%}}.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}.cf{*zoom: 1}.menu,.submenu{margin:0;padding:0;list-style:none}.menu{margin:50px auto;width:800px;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;background:#000}.menu>li{background:#000;float:left;position:relative;transform:skew(25deg)}.menu a{display:block;color:#fff;text-transform:uppercase;text-decoration:none;font-family:Arial,Helvetica;font-size:14px}.menu li:hover{background:#e74c3c}.menu>li>a{transform:skew(-25deg);padding:1em 2em}.submenu{position:absolute;width:200px;left:50%;margin-left:-100px;transform:skew(-25deg);transform-origin:left top}.submenu li{background-color:#34495e;position:relative;overflow:hidden}.submenu>li>a{padding:1em 2em}.submenu>li:after{content:"";position:absolute;top:-125%;height:100%;width:100%;box-shadow:0 0 50px #000000e6}.submenu>li:nth-child(odd){transform:skew(-25deg) translate(0)}.submenu>li:nth-child(odd)>a{transform:skew(25deg)}.submenu>li:nth-child(odd):after{right:-50%;transform:skew(-25deg) rotate(3deg)}.submenu>li:nth-child(even){transform:skew(25deg) translate(0)}.submenu>li:nth-child(even)>a{transform:skew(-25deg)}.submenu>li:nth-child(even):after{left:-50%;transform:skew(25deg) rotate(3deg)}.submenu,.submenu li{opacity:0;visibility:hidden}.submenu li{transition:.2s ease transform}.menu>li:hover .submenu,.menu>li:hover .submenu li{opacity:1;visibility:visible}.menu>li:hover .submenu li:nth-child(even){transform:skew(25deg) translate(15px)}.menu>li:hover .submenu li:nth-child(odd){transform:skew(-25deg) translate(-15px)}.rotator{position:absolute;left:0;right:0;margin:auto;width:55%;height:150px;transform-style:preserve-3d;animation:roter 17s linear infinite}.rotator:hover{animation-play-state:paused}@keyframes roter{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}.items{position:absolute;height:100%;width:100%;overflow:hidden;border:2px solid #333}.items:hover img{transform:scale(1.2)}.items img{height:100%;width:100%;transition:all 2s ease}.items:first-child{transform:rotateY(180deg) translateZ(300px)}.items:nth-child(2){transform:rotateY(360deg) translateZ(300px)}