#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%}#secteurs.wrapper{margin:50px -webkit-calc((100% - 1200px) / 2) 50px;margin:50px calc((100% - 1200px) / 2) 50px}
#references,.ressources{margin:0 150px}
.ref{width:220px;height:180px;padding:10px 35px 25px;display:block;margin:20px;cursor:pointer;position:relative;border:none}
.ressources .ref{padding:25px 35px;height:120px}
.corner{width:35px;height:35px;position:absolute;border-style:solid;border-width:1px 0 0 1px;border-color:#1e2324}
.corner1{top:0;left:0}
.corner2{top:0;right:0;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
.corner3{right:0;bottom:0;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);sform:rotate(180deg)}
.corner4{left:0;bottom:0;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}
.corner::after{content:'';display:block;position:absolute;top:10px;left:10px;border-style:solid;border-width:1px 0 0 1px;border-color:#1e2324;width:10px;height:10px}
@keyframes hCorner{0%{margin:0}
50%{margin:5px}
100%{margin:0}}
.ref:hover .corner{-webkit-animation:hCorner 500ms infinite;-o-animation:hCorner 500ms infinite;animation:hCorner 500ms infinite}
.ref img{display:inline-block;margin-bottom:5px;width:100%;height:auto}
.ref strong,.modal_container strong{width:100%;height:45px;padding:1px 5px;background-color:#1e2324;color:#FFF;font-size:0.9375rem}
.modal_container strong{width:90%;margin:5px auto 10px}
.modal_wrapper{display:block;height:0;overflow:hidden}
.modal_container{display:block;padding:10px 0 5px;position:relative;width:300px;text-align:center}
.modal_container.ressource{width:500px;padding:30px 10px 20px}
.modal_container.ressource div{margin:20px 30px 0;text-align:left}
.modal_container img{width:200px;height:150px}
.modal_container img.logo{width:200px;height:80px;margin:5px 0;object-fit:contain;object-position:center center}
.modal_container ul{list-style:disc;margin:0 0 10px 20px}
.modal_container li{margin:3px 0;line-height:1.2rem}
.modal_container h4{text-decoration:underline;margin-bottom:10px}
.fancybox-content{padding:10px}
.fancybox-slide--html .fancybox-close-small{right:-webkit-calc(50% - 22px);right:calc(50% - 22px);top:-5px}
@media screen and (max-width:1299px){#references,.ressources{margin:0 100px}}
@media screen and (max-width:450px){#secteurs.wrapper{margin:50px 20px}
#references,.ressources{margin:0}
.modal_container,.modal_container.ressource{width:280px}
.ref{width:140px;height:150px;padding:5px 15px 15px;margin:15px}
.ressources .ref{height:90px;padding:25px 15px}
.ref strong,.modal_container strong{width:90%;margin:0 auto;height:35px;font-size:0.75rem}
.ressources .ref strong{height:45px}}
@media screen and (max-width:380px){.ref{margin:10px 5px}
.modal_container,.modal_container.ressource{width:200px}
.modal_container img{width:180px;height:120px}
.modal_container img.logo{width:150px;height:80px;margin:5px 0;object-fit:contain;object-position:center center}}#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}}