.lSSlideOuter {
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.lightSlider:before, .lightSlider:after {
content: " ";
display: table;
}
.lightSlider {
overflow: hidden;
margin: 0;
}
.lSSlideWrapper {
max-width: 100%;
overflow: hidden;
position: relative;
}
.lSSlideWrapper > .lightSlider:after {
clear: both;
}
.lSSlideWrapper .lSSlide {
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition: all 1s;
-webkit-transition-property: -webkit-transform,height;
-moz-transition-property: -moz-transform,height;
transition-property: transform,height;
-webkit-transition-duration: inherit !important;
transition-duration: inherit !important;
-webkit-transition-timing-function: inherit !important;
transition-timing-function: inherit !important;
}
.lSSlideWrapper .lSFade {
position: relative;
}
.lSSlideWrapper .lSFade > * {
position: absolute !important;
top: 0;
left: 0;
z-index: 9;
margin-right: 0;
width: 100%;
}
.lSSlideWrapper.usingCss .lSFade > * {
opacity: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transition-duration: inherit !important;
transition-duration: inherit !important;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-timing-function: inherit !important;
transition-timing-function: inherit !important;
}
.lSSlideWrapper .lSFade > *.active {
z-index: 10;
}
.lSSlideWrapper.usingCss .lSFade > *.active {
opacity: 1;
}  .lSSlideOuter .lSPager.lSpg {
margin: 10px 0 0;
padding: 0;
text-align: center;
}
.lSSlideOuter .lSPager.lSpg > li {
cursor: pointer;
display: inline-block;
padding: 0 5px;
}
.lSSlideOuter .lSPager.lSpg > li a {
background-color: #222222;
border-radius: 30px;
display: inline-block;
height: 8px;
overflow: hidden;
text-indent: -999em;
width: 8px;
position: relative;
z-index: 99;
-webkit-transition: all 0.5s linear 0s;
transition: all 0.5s linear 0s;
}
.lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a {
background-color: #428bca;
}
.lSSlideOuter .media {
opacity: 0.8;
}
.lSSlideOuter .media.active {
opacity: 1;
}  .lSSlideOuter .lSPager.lSGallery {
list-style: none outside none;
padding-left: 0;
margin: 0;
overflow: hidden;
transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.lSSlideOuter .lSPager.lSGallery li {
overflow: hidden;
-webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s;
transition: border-radius 0.12s linear 0s 0.35s linear 0s;
}
.lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover {
border-radius: 5px;
}
.lSSlideOuter .lSPager.lSGallery img {
display: block;
height: auto;
max-width: 100%;
}
.lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter .lSPager.lSGallery:after {
content: " ";
display: table;
}
.lSSlideOuter .lSPager.lSGallery:after {
clear: both;
}  .lSAction > a {
width: 32px;
display: block;
top: 50%;
height: 32px;
background-image: url(//digital-packaging.fr/wp-content/themes/spectra-one/blocks/img/controls.png);
cursor: pointer;
position: absolute;
z-index: 99;
margin-top: -16px;
opacity: 0.5;
-webkit-transition: opacity 0.35s linear 0s;
transition: opacity 0.35s linear 0s;
}
.lSAction > a:hover {
opacity: 1;
}
.lSAction > .lSPrev {
background-position: 0 0;
left: 10px;
}
.lSAction > .lSNext {
background-position: -32px 0;
right: 10px;
}
.lSAction > a.disabled {
pointer-events: none;
}
.cS-hidden {
height: 1px;
opacity: 0;
filter: alpha(opacity=0);
overflow: hidden;
} .lSSlideOuter.vertical {
position: relative;
}
.lSSlideOuter.vertical.noPager {
padding-right: 0px !important;
}
.lSSlideOuter.vertical .lSGallery {
position: absolute !important;
right: 0;
top: 0;
}
.lSSlideOuter.vertical .lightSlider > * {
width: 100% !important;
max-width: none !important;
} .lSSlideOuter.vertical .lSAction > a {
left: 50%;
margin-left: -14px;
margin-top: 0;
}
.lSSlideOuter.vertical .lSAction > .lSNext {
background-position: 31px -31px;
bottom: 10px;
top: auto;
}
.lSSlideOuter.vertical .lSAction > .lSPrev {
background-position: 0 -31px;
bottom: auto;
top: 10px;
}  .lSSlideOuter.lSrtl {
direction: rtl;
}
.lSSlideOuter .lightSlider, .lSSlideOuter .lSPager {
padding-left: 0;
list-style: none outside none;
}
.lSSlideOuter.lSrtl .lightSlider, .lSSlideOuter.lSrtl .lSPager {
padding-right: 0;
}
.lSSlideOuter .lightSlider > *,  .lSSlideOuter .lSGallery li {
float: left;
}
.lSSlideOuter.lSrtl .lightSlider > *,  .lSSlideOuter.lSrtl .lSGallery li {
float: right !important;
} @-webkit-keyframes rightEnd {
0% {
left: 0;
}
50% {
left: -15px;
}
100% {
left: 0;
}
}
@keyframes rightEnd {
0% {
left: 0;
}
50% {
left: -15px;
}
100% {
left: 0;
}
}
@-webkit-keyframes topEnd {
0% {
top: 0;
}
50% {
top: -15px;
}
100% {
top: 0;
}
}
@keyframes topEnd {
0% {
top: 0;
}
50% {
top: -15px;
}
100% {
top: 0;
}
}
@-webkit-keyframes leftEnd {
0% {
left: 0;
}
50% {
left: 15px;
}
100% {
left: 0;
}
}
@keyframes leftEnd {
0% {
left: 0;
}
50% {
left: 15px;
}
100% {
left: 0;
}
}
@-webkit-keyframes bottomEnd {
0% {
bottom: 0;
}
50% {
bottom: -15px;
}
100% {
bottom: 0;
}
}
@keyframes bottomEnd {
0% {
bottom: 0;
}
50% {
bottom: -15px;
}
100% {
bottom: 0;
}
}
.lSSlideOuter .rightEnd {
-webkit-animation: rightEnd 0.3s;
animation: rightEnd 0.3s;
position: relative;
}
.lSSlideOuter .leftEnd {
-webkit-animation: leftEnd 0.3s;
animation: leftEnd 0.3s;
position: relative;
}
.lSSlideOuter.vertical .rightEnd {
-webkit-animation: topEnd 0.3s;
animation: topEnd 0.3s;
position: relative;
}
.lSSlideOuter.vertical .leftEnd {
-webkit-animation: bottomEnd 0.3s;
animation: bottomEnd 0.3s;
position: relative;
}
.lSSlideOuter.lSrtl .rightEnd {
-webkit-animation: leftEnd 0.3s;
animation: leftEnd 0.3s;
position: relative;
}
.lSSlideOuter.lSrtl .leftEnd {
-webkit-animation: rightEnd 0.3s;
animation: rightEnd 0.3s;
position: relative;
}/*/*/.lightSlider.lsGrab > * {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -o-grab;
cursor: -ms-grab;
cursor: grab;
}
.lightSlider.lsGrabbing > * {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: -o-grabbing;
cursor: -ms-grabbing;
cursor: grabbing;
}:root{
--banner-height-top: 126px;
--banner-img-height: 4rem;
--banner-img-ratio: 3 / 2;
--banner-gap: 1rem;
--related-gap: 2rem;
--header-height: 80px; --mobile-menu-height: 60px; --tablet-menu-height: 80px; }
.sli-banner{
display: grid;
grid-template-columns: 1fr 2fr;
height: calc(100vh - var(--banner-height-top) + 2rem);
padding-bottom:8rem;
padding-top: 2rem; position: relative;
max-width: 1600px;
}
.sli-banner-encart{
overflow: auto;
background: var(--wp--preset--color--custom-100);
padding: 3.5rem 3.5rem 2.3rem;
}
.sli-banner-encart h1{
font-size: var(--wp--preset--font-size--xx-large);
font-style: normal;
font-weight: 800;
letter-spacing: -0.03em;
margin: 0 0 4px;
text-transform: uppercase;
line-height: 1.1;
}
.sli-banner-encart p{
font-size: var(--wp--preset--font-size--x-small);
line-height: 1.5;
}
.sli-banner-encart p.subtitle{
margin: 0;
text-transform: uppercase;
font-size: var(--wp--preset--font-size--medium);
}
#image-gallery,
.lSSlideOuter,
.lSSlideWrapper,
.lSSlideTrack,
.lslide {
height: calc(100vh - var(--banner-height-top) - 8rem) !important;
}
#image-gallery img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
}
.sli-banner h1{
margin: 0;
}
.sli-banner .lSSlideOuter .lSPager.lSGallery{
position: absolute;
left: 0;
right: 0;
padding: 2rem 4rem;
width: 100%!important;
margin-top: 0!important;
}
.sli-banner .lSSlideOuter .lSPager.lSGallery li{
width: auto!important;
height: var(--banner-img-height)!important;
aspect-ratio: var(--banner-img-ratio)!important;
margin-right: var(--banner-gap)!important;
position: relative;
}
.sli-banner .lSSlideOuter .lSPager.lSGallery li:not(.active)::before{
content: '';
position: absolute;
inset: 0;
background-color: var(--wp--preset--color--custom-950);
opacity: 0.5;
z-index: 2;
transition: opacity 0.4s ease;
pointer-events: none;
}
.sli-banner .lSSlideOuter .lSPager.lSGallery li img{
width: var(--banner-img-width)!important;
aspect-ratio: var(--banner-img-ratio)!important;
object-fit: cover;
}
.lSSlideOuter .lSPager.lSGallery li.active, 
.lSSlideOuter .lSPager.lSGallery li:hover{
border-radius: 0!important;
} .sli-banner-encart::-webkit-scrollbar-track
{
background-color: var(--wp--preset--color--custom-100);
}
.sli-banner-encart::-webkit-scrollbar
{
width: 6px;
background-color: var(--wp--preset--color--custom-100);  
}
.sli-banner-encart::-webkit-scrollbar-thumb
{
transition-duration: .2s;
background-color: var(--wp--preset--color--custom-900);
}
.sli-banner-encart::-webkit-scrollbar-thumb:hover
{
background-color: var(--wp--preset--color--custom-primary);
} .sli-portfolio-related
{
display: flex;
justify-content: space-between;
gap: var(--related-gap);
padding: 4rem;
border-top: 1px solid var(--wp--preset--color--custom-900);
margin-top: 0!important;
}
.sli-portfolio-related.sli-portfolio-evenly{
justify-content: space-evenly;
}
.sli-portfolio-related h5
{
font-size: var(--wp--preset--font-size--medium);
margin-top: 0;
margin-bottom: 2rem;
}
.sli-portfolio-related-galery{
display: flex;
flex-wrap: wrap;
gap: var(--banner-gap);
}
.sli-portfolio-related-galery .sli-portfolio-related-item img{
width: auto!important;
height: var(--banner-img-height)!important;
aspect-ratio: var(--banner-img-ratio);
height: auto;
object-fit: cover;
}
.sli-expertise-items{
margin: 0;
padding: 0;
}
.sli-expertise-items li{
list-style:none;
font-size:1rem;
}
.sli-expertise-items li a{
color: var(--wp--preset--color--custom-400);
text-transform: uppercase;
font-weight: bold;
}
.sli-expertise-items li.current a{
color: var(--wp--preset--color--custom-950);
} @media screen and (max-width: 1024px) { .sli-banner-container {
margin-top: 0 !important;
padding-top: 0 !important; }
.sli-banner {
display: flex;
flex-direction: column-reverse; height: calc(100vh - var(--header-height)); padding-bottom: 0;
padding-top: 0; width: 100%;
max-width: 100%;
position: relative;
} #image-gallery {
flex: 1;
position: relative;
}
#image-gallery,
.lSSlideOuter,
.lSSlideWrapper,
.lSSlideTrack,
.lslide {
height: 100% !important;
} .sli-banner .lSSlideOuter .lSPager.lSGallery {
display: none !important;
} .sli-banner-encart {
position: relative;
background: var(--wp--preset--color--custom-100);
color: inherit; padding: 2.5rem 2rem; max-height: 35vh; overflow-y: auto;
flex-shrink: 0; }
.sli-banner-encart h1 {
font-size: 32px; color: inherit; }
.sli-banner-encart p.subtitle {
font-size: 18px; color: inherit; opacity: 1; }
.sli-banner-encart .sli-banner-content p {
font-size: 15px; line-height: 22px; color: inherit; } .sli-portfolio-related {
flex-direction: column;
padding: 2rem;
border-top: none; }
.sli-portfolio-related.sli-portfolio-evenly,
.sli-portfolio-related.sli-portfolio-spaced {
justify-content: flex-start;
}
.sli-portfolio-related-section {
width: 100%;
}
.sli-portfolio-related h5 {
font-size: 20px; margin-bottom: 1rem;
}
} @media screen and (max-width: 768px) {
.sli-banner {
height: calc(100vh - var(--header-height)); height: calc(var(--vh, 1vh) * 100 - var(--header-height)); max-height: calc(100vh - var(--header-height)); } .sli-banner-container {
overflow: hidden;
max-height: 100vh;
} .sli-banner-encart {
padding: 2.5rem 1.5rem; max-height: 30vh; max-height: calc(var(--vh, 1vh) * 30); }
.sli-banner-encart h1 {
font-size: 24px; margin-bottom: 0.25rem;
}
.sli-banner-encart p.subtitle {
font-size: 14px; margin-bottom: 0.5rem;
}
.sli-banner-encart .sli-banner-content p {
font-size: 13px; line-height: 19px; } .sli-banner-encart::-webkit-scrollbar {
width: 3px;
} .sli-portfolio-related {
padding: 2.5rem 1.5rem; gap: 2.5rem; border-top: none; }
.sli-portfolio-related h5 {
font-size: 18px; margin-bottom: 0.75rem;
}
.sli-portfolio-related-galery {
gap: 0.5rem;
}
.sli-portfolio-related-galery .sli-portfolio-related-item img {
height: var(--banner-img-height) !important; width: auto !important;
aspect-ratio: var(--banner-img-ratio);
object-fit: cover;
} .sli-expertise-items li {
font-size: 14px; line-height: 1.4; margin-bottom: 0.5rem;
}
} @media (hover: none) and (pointer: coarse) { .sli-banner .lSSlideOuter .lSPager.lSGallery li:hover::before {
opacity: 0.5;
} .sli-expertise-items li a {
display: inline-block;
padding: 0.5rem 0;
}
} @media screen and (max-width: 1024px) { #image-gallery li {
height: 100% !important;
overflow: hidden !important;
position: relative !important;
} #image-gallery li img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
max-width: none !important;
min-width: 100% !important;
min-height: 100% !important;
} .lSSlideWrapper,
.lSSlideWrapper ul,
.lSSlideWrapper li {
height: 100% !important;
} .lSSlideWrapper {
height: 100% !important;
overflow: hidden !important;
}
}