#up{position:relative}
#up::after{content:'';display:block;background-color:#FFF;position:absolute;z-index:2;bottom:-8px;left:-webkit-calc(50% - 30px);left:calc(50% - 30px);width:60px;height:25px}
#up span{display:block;cursor:pointer;width:35px;height:35px;background-color:#1e2324;margin:0 auto;position:relative;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:background-color 300ms;-o-transition:background-color 300ms;transition:background-color 300ms}
#up span:hover{background-color:#575757}
#up span::after{content:'';display:block;position:absolute;z-index:1;top:7px;left:7px;width:13px;height:13px;border-style:solid;border-width:1px 0 0 1px;border-color:#FFF}
#social_wrapper a{background:#FFF;display:inline-block;width:50px;height:50px;margin:20px;border:1px solid #575757;color:#575757;padding:4px;font-size:1.8rem;position:relative}
#social_wrapper a:hover{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}
#social_wrapper a::before{content:'';display:block;width:10px;background:#FFF;height:52px;position:absolute;z-index:1;top:-2px;left:calc(50% - 5px)}
#social_wrapper a::after{content:'';display:block;width:52px;background:#FFF;height:10px;position:absolute;z-index:1;left:-2px;top:calc(50% - 5px)}
#social_wrapper a span{display:inline-block;width:100%;height:100%;border:1px solid #1e2324;position:relative}
#social_wrapper a span i{display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;align-items:center;align-content:center;justify-content:center;position:absolute;z-index:5;top:-5px;left:-5px;width:calc(100% + 10px);height:calc(100% + 10px);background:#FFF;border-radius:50%}
footer{text-align:center;padding:10px 10px 20px;font-size:0.6875rem;line-height:1rem}
footer a{color:#1e2324}
.fancybox-button.fancybox-close-small svg{display:none}
.fancybox-slide--html .fancybox-close-small::after{content:'';display:block;width:24px;height:24px;background:url('https://www.groupehmp.fr/medias/imports/close-fb.svg') no-repeat center center}
@media screen and (max-width:450px){#up button{font-size:2.5rem}}#gallery a{display:inline-block;width:300px;height:300px;margin:30px 16.6666666667px;overflow:hidden}
#gallery picture,#gallery picture img{display:block;width:100%;height:100%;overflow:hidden;object-fit:cover;position:relative}
#gallery picture::before{content:'';position:absolute;z-index:5;top:0;right:0;bottom:0;left:0;background-color:rgba(30,35,36,0.5);background-image:url(https://dev.groupehmp.fr/medias/imports/process_frame.svg);background-position:center;background-size:69%;-webkit-transition:all 300ms;-o-transition:all 300ms;transition:all 300ms}
#gallery picture:hover::before{top:5px;right:5px;bottom:5px;left:5px;background-color:transparent;background-size:87%}#timeline{margin:50px auto;width:80%;max-width:1200px}
#line{height:30px;overflow:hidden;position:relative}
#line::before{content:'';display:block;width:100%;height:1px;overflow:hidden;position:absolute;z-index:1;top:50%;left:0;background-color:#1e2324}
#drag{position:absolute;z-index:2;top:0;width:150px;height:100%;padding:0 10px;position:relative;background-color:#FFF;background-image:url('https://www.groupehmp.fr/medias/imports/background_pattern.png');background-repeat:repeat;-webkit-transition:left 300ms;-o-transition:left 300ms;transition:left 300ms}
.step1 #drag{left:50px}
.step2 #drag{left:-webkit-calc(50% - 75px);left:calc(50% - 75px)}
.step3 #drag{left:-webkit-calc(100% - 200px);left:calc(100% - 200px)}
#drag .flex{height:100%}
#drag span{display:block;width:11px;height:21px;background:url('https://www.groupehmp.fr/medias/imports/drag-side.svg') no-repeat center center}
#drag span.r{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
#drag mark{font-family:'introrust';background-color:transparent;display:none}
#drag mark.active{display:block}
#steps{height:200px;margin-top:5px;position:relative;overflow:hidden}
#wrap{width:300%;height:100%;position:absolute;top:0;left:0;-webkit-transition:left 300ms;-o-transition:left 300ms;transition:left 300ms}
.step1 #wrap{left:0}
.step2 #wrap{left:-100%}
.step3 #wrap{left:-200%}
.step{width:33.333333333%;overflow:hidden}
.step span.left,.step span.center,.step span.right{display:block;width:40%;height:200px;overflow:hidden;-webkit-transform:skew(-45deg);-ms-transform:skew(-45deg);-o-transform:skew(-45deg);transform:skew(-45deg)}
.step span.left{margin-left:-10%}
.step span.center{width:35%}
.step span.right{margin-right:-10%}
#steps img{width:150%;height:200px;margin-left:-25%;object-fit:cover;object-position:center center;-webkit-transform:skew(45deg);-ms-transform:skew(45deg);-o-transform:skew(45deg);transform:skew(45deg)}
.upside_down_relative{margin:100px auto 50px;width:80%;height:550px;max-width:1150px;position:relative;isolation:isolate}
.upside_down_relative .top,.upside_down_relative .hover{position:absolute;overflow:hidden;top:0;left:0;right:0;bottom:0}
.upside_down_relative .top{z-index:10}
.upside_down_relative .hover{z-index:5}
.upside_down_relative .top .reverse{position:absolute;z-index:2;left:0;bottom:0;flex-direction:row-reverse}
.upside_down_relative .hover .reverse{position:absolute;z-index:1;left:0;top:0;flex-direction:row-reverse}
.upside_down_relative .item{width:-webkit-calc(50% - 20px);width:calc(50% - 20px);overflow:hidden;-webkit-transition:height 300ms;-o-transition:height 300ms;transition:height 300ms}
.upside_down_relative .text{height:200px;font-size:0.875rem}
.upside_down_relative .pt{padding-top:35px}
.upside_down_relative .pb{padding-bottom:35px}
.upside_down_relative .tr{text-align:right}
.upside_down_relative .hover .text{height:0}
.upside_down_relative .text h2,.upside_down_relative .text div,.upside_down_relative .text p{width:100%}
.upside_down_relative .text div.half{width:-webkit-calc(100% - 220px);width:calc(100% - 220px);margin-left:20px}
.upside_down_relative .text .certification{width:200px;height:auto}
.upside_down_relative .text h2{font-size:1.875rem;line-height:2.2rem;margin-bottom:10px;text-transform:uppercase;font-family:'introrust'}
.upside_down_relative img{width:100%;height:350px;vertical-align:top;object-fit:cover;object-position:center center}
.upside_down_relative .hover img{height:0}
.upside_down_relative .corners,.upside_down_relative .angles{z-index:50}
.upside_down_relative .corners.tl{top:175px}
.upside_down_relative .angles.tl{top:200px}
.upside_down_relative .corners.br{bottom:175px}
.upside_down_relative .angles.br{bottom:200px}
.upside_down_relative:hover .top .text,.upside_down_relative:hover .top img.item{height:0;opacity:0;transition-delay:1s}
.upside_down_relative:hover .hover .text{height:200px}
.upside_down_relative:hover .hover img.item{height:350px}
.upside_down_relative:hover .corners.tl{left:50%}
.upside_down_relative:hover .angles.tl{left:-webkit-calc(50% + 20px);left:calc(50% + 20px);width:155px;height:155px}
.upside_down_relative:hover .corners.br{right:50%}
.upside_down_relative:hover .angles.br{right:-webkit-calc(50% + 20px);right:calc(50% + 20px);width:155px;height:155px}
@media screen and (max-width:1299px){.upside_down_relative{width:-webkit-calc(100% - 95px);width:calc(100% - 95px);height:auto}
.upside_down_relative .top,.upside_down_relative .hover{overflow:hidden;height:550px;position:relative}
.upside_down_relative .top{top:auto;left:auto;right:auto;bottom:auto;margin-bottom:30px}
.upside_down_relative .hover{top:auto;left:auto;right:auto;bottom:auto;flex-direction:row-reverse}
.upside_down_relative:hover .top .text,.upside_down_relative .hover .text{height:200px;opacity:1}
.upside_down_relative:hover .top img.item,.upside_down_relative .hover img.item{height:350px;opacity:1}
.upside_down_relative .hover .reverse{flex-direction:row}
.upside_down_relative .text div.half{width:-webkit-calc(100% - 170px);width:calc(100% - 170px)}
.upside_down_relative .text .certification{width:150px}
.upside_down_relative .top .pt{padding-top:0}
.upside_down_relative .hover .pb{padding-bottom:0}
.upside_down_relative:hover .corners.tl{left:-25px}
.upside_down_relative:hover .angles.tl{left:0}
.upside_down_relative:hover .corners.br{right:-25px}
.upside_down_relative:hover .angles.br{right:0}
.upside_down_relative .corners.br{bottom:175px}
.upside_down_relative .angles.br{bottom:200px}}
@media screen and (max-width:1080px){#steps img{width:190%;margin-left:-45%}
.upside_down_relative .top,.upside_down_relative .hover{height:auto}
.upside_down_relative .item{width:100%}
.upside_down_relative .top .reverse,.upside_down_relative .hover .reverse{position:relative}
.upside_down_relative .text,.upside_down_relative:hover .text{text-align:center;height:auto;padding:35px 0;font-size:1.1rem;line-height:1.3rem}
.upside_down_relative .pt,.upside_down_relative .top .pt,.upside_down_relative:hover .pt,.upside_down_relative:hover .top .pt{padding-top:35px}
.upside_down_relative .pb,.upside_down_relative .bottom .pb,.upside_down_relative .hover .pb,.upside_down_relative:hover .pb,.upside_down_relative:hover .bottom .pb,.upside_down_relative:hover .hover .pb{padding-bottom:35px}
.upside_down_relative .tr{text-align:center}
.upside_down_relative:hover .top .text,.upside_down_relative .hover .text,.upside_down_relative:hover .hover .text{height:auto;opacity:1}
.upside_down_relative .top{margin-bottom:0}
.upside_down_relative .text div.half{width:100%;margin-top:20px;margin-left:0}
.upside_down_relative .text .certification{margin:0 auto}
.upside_down_relative .corners.br{bottom:-25px}
.upside_down_relative .angles.br{bottom:0}}
@media screen and (max-width:450px){.upside_down_relative img.item,.upside_down_relative .hover img.item,.upside_down_relative:hover .top img.item,.upside_down_relative:hover .hover img.item{height:200px}
.upside_down_relative .text h2{font-size:1.75rem;line-height:2rem}
.step1 #drag{left:10px}
.step2 #drag{left:-webkit-calc(50% - 75px);left:calc(50% - 75px)}
.step3 #drag{left:-webkit-calc(100% - 160px);left:calc(100% - 160px)}
.step{height:200px;position:relative}
.step span.left,.step span.center,.step span.right{width:100%;height:200px;transform:none;position:absolute;top:0;left:0;-webkit-transition:left 300ms;-o-transition:left 300ms;transition:left 300ms}
.ministep1 .step span.left{margin-left:0;z-index:1;left:0}
.ministep1 .step span.center{width:100%;z-index:2;left:100%}
.ministep1 .step span.right{margin-right:0;z-index:3;left:100%}
.ministep2 span.left{left:-100%}
.ministep2 span.center{left:0}
.ministep2 span.right{left:100%}
.ministep3 span.left{left:-100%}
.ministep3 span.center{left:-100%}
.ministep3 span.right{left:0}
#steps img{width:100%;margin-left:0;transform:none}}
@media screen and (max-width:380px){.upside_down_relative .text h2{font-size:1.2rem;line-height:1.8rem}}
@media screen and (min-width:1500px){#timeline{max-width:1400px}
.upside_down_relative{max-width:1350px}}#process_wrapper{text-align:center}
#process_wrapper.wrapper{margin:80px 20px 40px}
#process{margin-top:30px}
#process a{display:block;width:185px;height:240px;color:#1e2324}
#process .container{display:inline-block;width:157px;height:157px;position:relative;margin-top:14px;background-color:transparent;-webkit-transition:padding 300ms;-o-transition:padding 300ms;transition:padding 300ms;-webkit-transition:all 300ms;-o-transition:all 300ms;transition:all 300ms}
#process a:hover .container{padding:5px;width:185px;height:185px;margin-top:0}
#process .container::before{content:'';position:absolute;z-index:5;top:0;right:0;bottom:0;left:0;background-color:rgba(30,35,36,0.5);background-image:url('https://www.groupehmp.fr/medias/imports/process_frame.svg');background-position:center;background-size:69%;-webkit-transition:all 300ms;-o-transition:all 300ms;transition:all 300ms}
#process a:hover .container::before{top:5px;right:5px;bottom:5px;left:5px;background-color:transparent;background-size:87%}
#process img{width:100%;height:100%;object-fit:cover}
#process span{position:absolute;z-index:10;top:30px;right:30px;bottom:30px;left:30px;color:transparent;font-size:4rem;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:#FFF;font-family:'ptrootui_bold';display:flex;justify-content:center;align-content:center;align-items:center;opacity:1;-webkit-transition:opacity 300ms;-o-transition:opacity 300ms;transition:opacity 300ms}
#process a:hover span{opacity:0}
#process strong{display:block;padding:5px 20px 0;font-size:0.9rem;line-height:1rem;-webkit-transition:all 300ms;-o-transition:all 300ms;transition:all 300ms}
#process a:hover strong{font-size:0.87rem}
@media screen and (max-width:1080px){#process_wrapper.wrapper{margin:60px 20px}
#process a{height:auto;width:185px;margin:40px 5px 0}
#process a .container{padding:5px;width:185px;height:185px;margin-top:0}
#process a .container::before{top:5px;right:5px;bottom:5px;left:5px;background-color:transparent;background-size:87%}
#process span{top:-130px;font-size:3rem;-webkit-text-stroke-color:#1e2324}
#process a:hover span{opacity:1}
#process a strong{font-size:0.87rem;line-height:1rem;padding:5px}}
@media screen and (max-width:450px){#process a{width:165px}
#process a .container{width:165px;height:165px}
#process a:hover .container{width:165px;height:165px}}
@media screen and (max-width:380px){#process a{width:125px;margin:50px 5px 0}
#process a .container{width:125px;height:125px}
#process a:hover .container{width:125px;height:125px}}