:root{
--bleu : #124680;
--blanc: #FFFFFF;
--gris : #f4f4f4;
--noir : #000000;
--rouge : rgb(219, 55, 55)
}
header {
position: relative;
background-color: #fff;
z-index: 2;
}
header .top {
background-color: #f4f4f4;
padding: 0.5em 10%;
}
header .top .rezo {
text-align: left;
}
header .top .rezo ul {
margin: 0;
padding: 0;
list-style: none;
}
header .top .rezo ul li {
display: inline-block;
vertical-align: middle;
}
header .top .rezo ul li a {
display: block;
width: 2em;
height: 2em;
overflow: hidden;
text-indent: 2em;
white-space: nowrap;
background-position: 50%;
background-size: 80%;
background-repeat: no-repeat;
}
header .top .rezo ul li.ytu a {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/ytu-01.svg);
}
header .top .rezo ul li.lkd a {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/lkd-01.svg);
}
header .top .lang {
text-align: right;
}
header .top .lang ul {
margin: 0;
padding: 0;
list-style: none;
}
header .top .lang ul li {
display: inline-block;
text-align: center;
}
header .top .lang ul li a {
display: block;
color: #323232;
text-transform: uppercase;
padding: 0.2rem 0.25rem;
font-size: 0.75rem;
text-align: center;
}
header .top .lang ul li.current-lang a {
font-weight: 700;
border: 1px solid;
}
header .top .lang ul li.lang-item-fr a:before {
content: "fr";
}
header .top .lang ul li.lang-item-en a:before {
content: "en";
}
header .top .lang ul li a img {
display: none;
}
header .top a {
color: #323232;
}
header .top .adresse,
header .top .email,
header .top .phone {
display: none;
}
header .top .textwidget {
display: inline-block;
vertical-align: middle;
}
header .top .adresse:before,
header .top .email:before,
header .top .phone:before {
content: "";
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
background-position: 50%;
background-size: cover;
background-repeat: no-repeat;
margin-right: 0.25rem;
}
header .top .phone:before {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/phone-01.svg);
}
header .top .email:before {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/email-01.svg);
}
header .top .adresse:before {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/adresse-01.svg);
}
header .bandeau-m {
padding: 0.5em 10%;
}
header .wdg {
display: none;
}
header .wdg h2 {
font-size: 0.9rem;
margin: 0;
}
header .wdg p {
margin: 0;
}
header .logo img {
max-width: 130px;
}
header .recherche {
position: relative;
}
header .recherche .formulaire {
display: inline-block;
}
header .recherche .formulaire:before {
content: "";
position: absolute;
left: -0.5rem;
top: 50%;
width: 30px;
height: 30px;
background: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/loupe-01.svg) no-repeat 50% / cover;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}
header .recherche input[type="submit"],
header .recherche label {
display: none;
}
header .recherche input {
border: none;
border-bottom: 1px solid #646464;
padding: 5px;
font-size: 1rem;
width: 150px;
}
.navigation {
background-color: #393d42;
padding: 0.25rem 10%;
z-index: 2;
}
.navigation .bt-menu {
display: inline-block;
width: 60px;
color: #fff;
cursor: pointer;
padding: 10px 0;
}
.navigation .bt-menu .trt {
width: 50%;
height: 1px;
background-color: #fff;
margin: 5px auto;
transition: all 0.2s ease-out;
}
.navigation .bt-menu .intitule {
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.1rem;
margin: 5px 0 0 0.1rem;
}
.navigation .bt-menu .intitule:before {
content: "menu";
display: block;
}
.navigation .bt-menu.actif .intitule:before {
content: "fermer";
}
.navigation .bt-menu.actif .trt {
width: 10px;
margin: 0 auto;
}
.navigation .bt-menu.actif .trt.un {
-webkit-transform: rotate(-45deg) translateY(50%);
transform: rotate(-45deg) translateY(50%);
}
.navigation .bt-menu.actif .trt.dx {
-webkit-transform: rotate(45deg) translateY(-50%);
transform: rotate(45deg) translateY(-50%);
}
.navigation ul {
margin: 2rem 0;
padding: 0;
list-style: none;
display: none;
}
.navigation ul li.be {
display: none;
}
.navigation ul li {
text-align: left;
text-transform: uppercase;
font-size: 1rem;
letter-spacing: 1px;
transition: all 0.2s ease-out;
}
.navigation ul li a:hover {
color: #dcdcdc;
}
.navigation ul li a {
display: block;
padding: 1em 0;
color: #fff;
transition: all 0.2s ease-out;
position: relative;
}
.navigation ul li a:after {
content: "";
display: block;
opacity: 0;
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 5px;
background-color: #124680;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
transition: all 0.3s ease-out;
}
.navigation ul li a:hover:after {
opacity: 1;
width: 100%;
}
@media screen and (min-width: 1024px) {
header .logo img {
max-width: 160px;
}
header .top .adresse,
header .top .email,
header .top .phone {
display: block;
font-size: 0.9rem;
}
header .recherche {
text-align: right;
}
}
@media screen and (min-width: 1280px) {
header .wdg {
display: block;
text-align: left;
font-size: 0.8rem;
padding-left: 1.5rem;
background: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/coche-01.svg) no-repeat 0 0/20px;
}
.navigation .bt-menu {
display: none;
}
.navigation {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 11;
padding: 0 5%;
}
.navigation ul {
display: block;
margin: 0;
}
.navigation ul li {
text-align: center;
display: inline-block;
font-size: 0.8rem;
}
.navigation ul li.current-menu-item{
background-color: var(--bleu);
}
.navigation ul li.exergue{
background-color: var(--rouge);
}
.navigation ul li a {
display: block;
padding: 1.5em 2em;
}
.navigation ul li a:hover:after {
opacity: 1;
width: calc(100% - 3em);
}
}
@media screen and (min-width: 1280px) {
.navigation ul li a {
padding: 1.5em 2.5em;
}
}
@font-face {
font-family: Walsheim;
src: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Light.eot);
src: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Light.eot?#iefix) format("embedded-opentype"), url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Light.woff) format("woff"), url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Light.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: Walsheim;
src: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Light-Oblique.eot);
src: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Light-Oblique.eot?#iefix) format("embedded-opentype"), url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Light-Oblique.woff) format("woff"),
url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Light-Oblique.ttf) format("truetype");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: Walsheim;
src: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Medium.eot);
src: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Medium.eot?#iefix) format("embedded-opentype"), url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Medium.woff) format("woff"), url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Medium.ttf) format("truetype");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: Walsheim;
src: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Bold.eot);
src: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Bold.eot?#iefix) format("embedded-opentype"), url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Bold.woff) format("woff"), url(//www.bene-solutions.com/wp-content/themes/hors-lignes/fonts/gt-walsheim/GT-Walsheim-Pro-Bold.ttf) format("truetype");
font-weight: 600;
font-style: normal;
}
html {
font-family: Walsheim, sans-serif;
font-size: 14px;
}
body {
text-align: center;
font-size: 1rem;
margin: 0;
}
img {
height: auto;
vertical-align: middle;
}
a {
text-decoration: none;
color: #124680;
transition: all 0.2s ease-out;
}
a:hover {
color: #393d42;
}
p, ul li{
line-height: 1.35
}
.row {
margin-left: 0;
margin-right: 0;
}
.row.mx{
margin-left: -1rem;
margin-right: -1rem;
}
h1,
h2,
h3,
h4 {
text-align: left;
}
* {
position: relative;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.inner {
padding-left: 10%;
padding-right: 10%;
}
.gris {
background-color: #393d42;
color: #fff;
}
.grisclair {
background-color: #f4f4f4;
}
.bleu {
background-color: #124680;
color: #fff;
}
.bleu-tr {
background-color: rgba(18, 70, 128, 0.85);
color: #fff;
}
.border-bottom {
border-bottom: 1px solid #c8c8c8;
padding-bottom: 3rem;
}
.no-margin {
margin-left: 0;
margin-right: 0;
}
.no-padding {
padding-left: 0;
padding-right: 0;
}
.cover {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
}
.alignright {
float: right;
margin-left: 1rem;
}
.alignleft {
float: left;
margin-right: 1rem;
}
.aligncenter {
float: none;
margin: 1rem auto;
}
.video {
overflow: hidden;
background-color: #c8c8c8;
}
.video video {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: auto;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.video a.down {
display: none;
}
.contenu {
max-width: 1920px;
margin: 0 auto;
}
@media screen and (min-width:1280px){
.contenu .pr{
padding-right:7.5%
}
}
.contenu .text-left{
text-align: left;
}
.contenu .intro {
position: relative;
}
.contenu .intro .bloc {
padding: 4rem 10%;
text-align: left;
position: relative;
}
.contenu .intro .bloc.bleu-tr {
position: relative;
z-index: 2;
}
.contenu .intro .bloc .picto-usine {
display: block;
width: 100%;
max-width: 100px;
background: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/usine-futur-bl-01.svg) no-repeat 50% / cover;
transition: all 0.2s ease-out;
}
.contenu .intro .bloc .picto-usine.en {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/usine-futur-bl-en-01.svg);
}
.contenu .intro .bloc h2 {
margin: 0 0 1rem;
font-weight: 400;
font-size: 2rem;
}
.contenu .intro .bloc h3,
.contenu h3 {
margin: 0.5rem 0;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.15rem;
}
.contenu .intro .bloc .extrait {
margin: 1rem 0;
}
.contenu .intro .vs {
position: relative;
}
.contenu .intro .vs .image {
display: none;
}
.contenu .intro .imagefond {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.contenu .mrg {
padding: 0 5% 1.5rem;
}
.liensuite {
width: 50%;
display: block;
background: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/fleche-suite-01.svg) no-repeat 100%/100px;
transition: all 0.2s linear;
float: right;
}
.liensuite:hover {
-webkit-transform: scaleX(1.1);
transform: scaleX(1.1);
-webkit-transform-origin: center left;
transform-origin: center left;
}
.texte a {
font-weight: 500;
}
.contenu .ingenierie {
background-color: #f4f4f4;
padding: 8rem 10%;
}
.contenu .ingenierie:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 15vw;
top: 100%;
left: 0;
background-color: inherit;
}
.contenu .ingenierie .row {
margin-left: -1rem;
margin-right: -1rem;
}
.contenu .ingenierie .bloc {
margin: 2rem 0;
}
.contenu .ingenierie .bloc h3 {
text-transform: uppercase;
letter-spacing: 0.15rem;
}
.contenu .ingenierie .partenaire {
background-color: #fff;
padding: 3rem;
}
.contenu .ingenierie .solution {
position: relative;
}
.contenu .ingenierie .partenaire img,
.contenu .ingenierie .solution img {
width: 100%;
max-width: 180px;
}
.contenu .ingenierie .image {
display: none;
}
.contenu .valeurs {
padding: 5rem 10%;
}
.contenu .valeurs > .row {
margin-left: -1rem;
margin-right: -1rem;
}
.contenu .valeurs > .row > div {
padding-left: 0;
padding-right: 0;
}
.contenu .valeurs .bloc {
padding: 4rem 10%;
text-align: left;
position: relative;
}
.contenu .valeurs .bloc h2 {
margin: 0 0 1rem;
font-weight: 400;
font-size: 2rem;
}
.contenu .valeurs .bloc h3 {
margin: 0.5rem 0;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.15rem;
}
.contenu .valeurs .bloc .extrait {
margin: 1rem 0;
}
.contenu .valeurs .equip {
margin-left: 10%;
-webkit-transform: translateY(-15%);
transform: translateY(-15%);
padding-left: 15%;
padding-right: 15%;
}
.contenu .valeurs .equip a {
color: #fff;
display: block;
margin: 2rem 0 0;
}
.contenu .valeurs .equip a .liensuite {
float: none;
}
.contenu a.bouton {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/fleche-suite-01.svg);
background-position: 50%;
background-size: 80%;
background-repeat: no-repeat;
width: 130px;
transition: all 0.2s linear;
}
.contenu a.bouton:hover {
padding-top: 20%;
}
.contenu .heading {
padding: 2rem 10%;
}
.contenu .heading .picto-usine {
width: 60px;
margin: 0 auto;
}
.contenu .heading h1 {
font-size: 2.5rem;
font-weight: 400;
margin-bottom: 0.25rem;
color: var(--bleu)
}
.contenu .heading h2 {
font-size: 2rem;
font-weight: 400;
}
.contenu .heading .extrait {
text-align: left;
padding: 2rem;
}
.contenu .heading .tags {
text-transform: uppercase;
text-align: left;
font-weight: 700;
margin: 0;
font-size: 0.9rem;
letter-spacing: 0.25rem;
}
.contenu .heading .tags > span {
display: inline-block;
margin-right: 2rem;
}
.filtre-bleu {
display: block;
background-color: rgba(18, 70, 128, 0.1);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
mix-blend-mode: multiply;
}
.contenu .inner .texte {
text-align: left;
}
.contenu .inner h2 {
font-size: 2rem;
font-weight: 400;
margin: 0;
}
.contenu .inner h3 {
margin: 1.5rem 0;
}
.contenu .inner h3:after {
content: "";
display: block;
width: 100px;
height: 5px;
background-color: #124680;
margin-top: 1rem;
}
.contenu .inner .marge {
padding: 2rem;
}
.contenu .inner .up {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.contenu .slider .swiper-slide {
background-color: #f4f4f4;
}
.contenu .slider .titres {
padding: 0 10%;
text-transform: lowercase;
}
.contenu .slider h1 {
font-weight: 400;
font-size: 2.5rem;
margin: 0.5rem 0;
}
.contenu .slider h2 {
font-weight: 400;
font-size: 1.5rem;
margin: 0;
}
.contenu .slider .swiper-container .fleches {
position: absolute;
right: 0;
bottom: 0;
color: #fff;
padding: 0.5rem 1rem;
z-index: 10;
}
.fleches .swiper-button-next,
.fleches .swiper-button-prev {
position: relative;
-webkit-transform: translate(0);
transform: translate(0);
width: 40px;
height: auto;
left: auto;
right: auto;
display: inline-block;
vertical-align: middle;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
margin-top: 0;
}
.fleches .swiper-button-next {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/slider-next-01.svg);
}
.fleches .swiper-button-next:after {
content: "";
width: 1px;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
background: #fff;
}
.fleches .swiper-button-prev {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/slider-prev-01.svg);
}
.contenu .intro-activite {
padding-top: 3rem;
padding-bottom: 3rem;
}
.contenu .intro-activite .picto {
float: right;
width: 60px;
}
.contenu .intro-activite .bloc {
margin: 1rem 0;
}
.contenu .intro-activite .innerthin {
padding: 0;
}
.contenu .deux-images {
margin-bottom: 2rem;
}
.contenu .deux-images a.vs {
display: block;
background-color: #f4f4f4;
}
.contenu .deux-images a.vs.vertic {
width: 60%;
}
.contenu .tit .vs img {
width: 100%;
}
.contenu .tit .vs {
margin: 1rem 0;
}
.contenu .deux-col {
padding-top: 2rem;
padding-bottom: 2rem;
}
.contenu .picto-futur {
display: block;
width: 60px;
margin: 1rem auto;
}
.contenu article {
margin: 0 0 3rem;
}
.contenu .item-secteur {
margin-bottom: 6rem;
}
.contenu .item-secteur .bloc-titre {
background-color: #fff;
color: #124680;
text-align: center;
box-sizing: border-box;
z-index: 3;
}
.contenu .item-secteur .bloc-titre h2 {
text-align: center;
text-transform: uppercase;
}
.contenu .item-secteur .bloc-titre.marge {
padding: 2rem 1rem;
}
.contenu .item-secteur .bloc-titre img {
display: block;
width: 80px;
margin: 0 auto;
}
.contenu .item-secteur .argument {
margin: 1rem 0;
}
.contenu .item-secteur .vs > div {
border: 1px solid #c8c8c8;
}
.contenu .image-wide {
margin-top: 3rem;
margin-bottom: 3rem;
overflow-x: hidden;
}
.contenu .image-wide img {
width: 100%;
}
.contenu .image-wide .titre-image {
text-align: left;
padding: 1rem;
position: absolute;
left: 0;
top: 0;
font-weight: 500;
z-index: 3;
}
.contenu .resultat a {
display: block;
}
.contenu .resultat a .extrait,
.contenu .resultat a h3 {
transition: all 0.2s ease-out;
}
.contenu .resultat a:hover .extrait,
.contenu .resultat a:hover h3 {
margin-left: 2rem;
}
.contenu .vignettes {
margin: 2rem 0;
padding: 0;
list-style: none;
}
.contenu .vignettes .swiper-container {
padding-bottom: 3rem;
}
.contenu .vignettes .vignette {
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
}
.contenu .vignettes .titre {
display: block;
padding: 0.25rem 0;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.15rem;
font-size: 0.8rem;
}
.contenu .vignettes .nav {
height: 40px;
}
.contenu .vignettes .nav .swiper-button-next,
.contenu .vignettes .nav .swiper-button-prev {
position: absolute;
width: 40px;
height: auto;
left: 50%;
top: auto;
margin: 0;
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/fleche-swp-01.svg);
}
.contenu .vignettes .nav .swiper-button-prev {
-webkit-transform: translate(-125%);
transform: translate(-125%);
background-position: 0;
}
.contenu .vignettes .nav .swiper-button-next {
-webkit-transform: translateX(125%, 0);
transform: translateX(125%, 0);
background-position: 100%;
}
.contenu .plan-site {
text-align: center;
margin-bottom: 3rem;
}
.contenu .plan-site ul {
margin: 0 auto;
padding: 0 5%;
list-style: none;
max-width: 768px;
border-left: 1px solid #c8c8c8;
border-right: 1px solid #c8c8c8;
}
.contenu .plan-site ul li {
text-align: left;
}
.contenu .plan-site ul li a {
display: block;
padding: 0.5rem 0;
}
.contenu .espacement{
height: 5vw
}
@media screen and (min-width: 768px) {
.contenu .heading h1 {
font-size: 3.5rem;
}
.contenu .slider .titres {
position: absolute;
left: 0;
top: 50%;
z-index: 10;
color: #fff;
padding-left: 15%;
}
.contenu .slider .titres h1,
.contenu .slider .titres h2 {
text-shadow: 0 0 8px #000;
}
}
@media screen and (min-width: 1024px) {
.video {
margin-top: -8vh;
}
.contenu .intro .bloc {
padding: 6rem 10%;
}
.contenu .intro .bloc h2,
.contenu .valeurs .bloc h2 {
font-size: 2.5rem;
}
.contenu .up {
-webkit-transform: translateY(-15%);
transform: translateY(-15%);
}
.contenu .mrg {
padding: 0;
}
.contenu .intro .vs .image {
display: block;
width: 75%;
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
position: absolute;
right: 0;
top: 0;
-webkit-transform: translate(14%, 15%);
transform: translate(14%, 15%);
z-index: 1;
}
.contenu .intro .imagefond {
display: none;
}
.contenu .intro .suite a {
float: none;
}
.contenu .ingenierie .partenaire {
margin-right: 2rem;
}
.contenu .ingenierie .solution {
margin-left: 2rem;
}
.contenu .valeurs .val:after {
content: "";
display: block;
width: 5vw;
height: 100%;
background-color: inherit;
position: absolute;
left: 100%;
top: 0;
}
.contenu .valeurs .equip {
margin-left: 0;
-webkit-transform: translateY(25%);
transform: translateY(25%);
}
.contenu .heading .extrait {
z-index: 3;
padding: 4rem;
}
.contenu .heading .extrait:after {
content: "";
display: block;
background-color: inherit;
position: absolute;
left: 100%;
top: 0;
width: 20%;
height: 100%;
}
.contenu .heading .vs {
z-index: 2;
}
.contenu .heading .picto-usine {
width: 80px;
float: right;
margin-top: 3rem;
}
.contenu .inner .marge {
padding: 4rem;
}
.contenu .colo-g {
padding-right: 7.5%;
}
.contenu .slider {
padding: 0 10%;
}
.contenu .intro-activite .decale {
width: 85%;
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
z-index: 10;
box-sizing: border-box;
}
.contenu .intro-activite .innerthin {
padding: 0 5%;
}
.contenu .deux-images.up {
-webkit-transform: translateY(-30%);
transform: translateY(-30%);
}
.contenu .pad-right {
padding-right: 10%;
}
.contenu .pad-left {
padding-left: 10%;
}
.contenu .item-secteur .argument {
margin: 0;
padding-left: 10%;
}
}
@media screen and (min-width: 1280px) {
.zi2 {
z-index: 2;
}
.video {
margin-top: -15vh;
}
.video a.down {
display: block;
width: 30px;
height: auto;
position: absolute;
left: 50%;
bottom: 5.5rem;
top: auto;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.video img {
width: 100%;
}
#introduction {
position: absolute;
left: 0;
top: -4rem;
width: 1px;
}
.contenu .intro .bloc.bleu {
padding-left: 15%;
padding-right: 0;
}
.contenu .intro .bloc .picto-usine:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.contenu .ingenierie .image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: right;
padding: 0;
position: relative;
}
.contenu .ingenierie .image .visuel {
width: 70%;
margin-left: 30%;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
position: absolute;
right: 0;
bottom: 0;
}
.contenu .ingenierie .solution a.bouton {
position: absolute;
left: 120%;
top: 50%;
z-index: 3;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.contenu .heading {
padding-bottom: 0;
}
.contenu .heading .vs:after {
content: "";
display: block;
background-color: #fff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 10%;
}
.contenu .espacement{
height: 3.5vw
}
.contenu .argu {
padding-top: 0;
}
.contenu .inner .bloc-centre {
margin: 0 5%;
}
.contenu .inner .marge {
padding: 4rem 6rem;
}
.contenu .inner .image-g {
width: 90%;
}
.contenu .heading .titres {
margin-bottom: 3rem;
}
.contenu .slider .titres {
padding: 0 15%;
}
.contenu .slider h1 {
font-size: 3.5rem;
}
.contenu .slider h2 {
font-size: 2rem;
}
.contenu .inner h3.decalgauche {
padding-left: 5%;
}
.contenu .slider .swiper-container .fleches {
padding: 1rem 2rem;
}
.fleches .swiper-button-next,
.fleches .swiper-button-prev {
width: 50px;
}
.contenu .intro-activite .picto {
width: 80px;
float: none;
margin: 0;
position: absolute;
right: 0;
top: 0;
transition: all 0.2s ease-out;
}
.contenu .intro-activite .picto:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.contenu .deux-images {
overflow-x: hidden;
margin-bottom: 0;
}
.contenu .deux-images.up {
-webkit-transform: translateY(-30%);
transform: translateY(-30%);
}
.contenu .deux-images .grisclair:before {
width: 15%;
right: 100%;
}
.contenu .deux-images .grisclair:after,
.contenu .deux-images .grisclair:before {
content: "";
display: block;
height: 100%;
position: absolute;
bottom: 0;
background: inherit;
}
.contenu .deux-images .grisclair:after {
width: 50%;
left: 100%;
}
.contenu .deux-images a.vs.horiz {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
.contenu .tit .vs a {
display: block;
width: 80%;
margin: 0 auto;
}
.contenu .deux-col {
padding-top: 6rem;
padding-bottom: 6rem;
}
.contenu .item-secteur .bloc-titre {
width: 50%;
position: absolute;
left: 50%;
top: 50%;
height: 25%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.contenu .item-secteur .bloc-titre:after {
content: "";
display: block;
background-color: #124680;
width: 80%;
height: 5px;
position: absolute;
right: 0;
top: 100%;
}
.contenu .item-secteur .argument {
padding-left: 15%;
}
.contenu .item-secteur .vs > div {
width: 90%;
}
.contenu .image-wide {
margin-top: 5rem;
margin-bottom: 5;
border-bottom: 1px solid #c8c8c8;
}
.contenu .image-wide .titre-image {
bottom: auto;
top: 50%;
color: #393d42;
font-weight: 500;
z-index: 3;
background-color: #fff;
-webkit-transform: translate(-20%, -50%);
transform: translate(-20%, -50%);
font-size: 1.25rem;
}
.contenu .image-wide .titre-image:after {
content: "";
display: block;
width: 80%;
height: 5px;
background-color: #124680;
position: absolute;
left: 0;
top: 100%;
}
}
@media screen and (min-width: 1440px) {
html {
font-size: 15px;
}
.contenu .intro .bloc h2,
.contenu .valeurs .bloc h2 {
font-size: 3rem;
}
.contenu .intro .bloc {
padding: 10rem 10%;
}
.contenu .inner .texte {
text-align: justify;
}
}
@media screen and (min-width: 1680px) {
.video {
margin-top: -19vh;
}
.contenu .ingenierie,
.contenu .valeurs {
padding: 8rem 15%;
}
.contenu .argu {
padding-top: 0;
}
.contenu .heading {
padding: 4rem 15% 0;
}
.contenu .heading .picto-usine {
width: 100px;
}
.contenu .slider {
padding: 0 15%;
}
.contenu .slider .titres {
padding: 0 20%;
}
.inner {
padding-left: 15%;
padding-right: 15%;
}
.fleches .swiper-button-next,
.fleches .swiper-button-prev {
width: 60px;
}
}
[data-ratio] {
display: block;
max-width: 100%;
position: relative;
}
[data-ratio]:before {
content: "";
display: block;
}
[data-ratio] > * {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
[data-ratio="20:9"]:before {
padding-top: 45%;
}
[data-ratio="2:1"]:before {
padding-top: 56.25%;
}
[data-ratio="9:20"]:before {
padding-top: 222.22%;
}
[data-ratio="16:9"]:before {
padding-top: 56.25%;
}
[data-ratio="9:16"]:before {
padding-top: 177.78%;
}
[data-ratio="90:140"]:before {
padding-top: 155.56%;
}
[data-ratio="160:100"]:before {
padding-top: 62.5%;
}
[data-ratio="4:3"]:before {
padding-top: 75%;
}
[data-ratio="3:4"]:before {
padding-top: 133.33%;
}
[data-ratio="1:1"]:before {
padding-top: 100%;
}
@media screen and (min-width: 1024px) {
[data-ratio="2:1"]:before {
padding-top: 50%;
}
}
section.secteurs {
background-color: #f4f4f4;
padding: 3rem 10%;
}
section.secteurs h2 {
font-weight: 400;
text-transform: lowercase;
letter-spacing: 0.2rem;
font-size: 3rem;
margin-bottom: 2rem;
}
section.secteurs .accroche {
font-weight: 400;
font-size: 1rem;
margin: 1em 0;
text-transform: uppercase;
letter-spacing: 0.2rem;
}
section.secteurs .swiper-container {
padding: 2rem 0;
}
section.secteurs .swiper-slide h3 {
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.15rem;
font-size: 0.9rem;
margin: 2rem 0;
}
section.secteurs .swiper-slide img {
max-width: 80px;
}
section.secteurs .swiper-slide .extrait {
line-height: 130%;
}
section.secteurs a.savoirplus {
color: #124680;
text-transform: uppercase;
letter-spacing: 0.1rem;
display: inline-block;
padding: 1rem 0;
position: relative;
}
section.secteurs a.savoirplus:after {
position: absolute;
left: 50%;
bottom: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
content: "";
display: inline-block;
width: 0;
height: 5px;
background-color: #124680;
opacity: 0.5;
transition: all 0.3s ease-out;
}
section.secteurs a.savoirplus:hover:after {
width: 60%;
opacity: 1;
}
section.news {
padding: 3rem 10%;
}
section.news h2 {
font-size: 3rem;
font-weight: 400;
letter-spacing: 0.05rem;
text-transform: lowercase;
}
section.news h2 span {
display: block;
text-transform: uppercase;
font-size: 1.25rem;
margin: 1.5rem 0;
}
section.news .swiper-container {
padding: 2rem 0;
}
section.news a.swiper-slide {
display: block;
color: #393d42;
transition: all 0.3s ease-out;
padding: 0.5rem;
box-sizing: border-box;
}
section.news a.swiper-slide .stick {
text-transform: uppercase;
letter-spacing: 0.1rem;
}
section.news a.swiper-slide .stick .date {
float: right;
color: #b4b4b4;
font-size: 0.8rem;
}
section.news a.swiper-slide .lireplus,
section.news a.swiper-slide .titre {
margin: 1rem 0;
}
section.news a.swiper-slide .titre {
font-size: 1.1rem;
}
section.news a.swiper-slide .lireplus {
text-transform: uppercase;
background: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/fleche-actu-01.svg) no-repeat 100%/120px;
}
section.news a.swiper-slide .vgn {
background-color: #fafafa;
margin: 1rem 0;
overflow: hidden;
}
section.news a.swiper-slide .vgn .wrap {
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
section.news a.swiper-slide > span {
display: block;
}
.swiper-button-prev,
section.news .swiper-container .swiper-button-next {
display: none;
}
.has-gris-background-color{
background-color: #f4f4f4;
}
.has-blanc-background-color{
background-color: rgb(255,255,255)
}
.frm_form_field:not(.frm_compact) .frm_dropzone {
max-width: 100%;
}
.liste-offres{
padding-top:3.5vw;
padding-bottom:3.5vw
}
.liste-offres .row > div{
display: flex
}
.liste-offres h2{
margin-bottom: 1em !important;
}
.liste-offres .item{
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
padding:1.5rem;
margin-bottom:2rem;
}
.liste-offres .item .ttl{
display: block;
text-align: left;
font-weight: bold;
font-size:1.25rem;
}
.liste-offres .item .infos{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding:0.5rem 0; margin:0.5rem 0;
border-top:1px solid rgb(180,180,180);
border-bottom:1px solid rgb(180,180,180)
}
.single-offre_emploi .infos{
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
border-bottom:1px solid var(--bleu);
padding-bottom:0.5rem;
font-weight: bold;
}
.liste-offres .item .infos .type, .single-offre_emploi .infos .type{
background-color: var(--bleu);
color: var(--blanc);
padding: 0.25rem 0.5rem;
border-radius: 1.5rem;
line-height: 1;
}
.liste-offres .item .infos .delay{
background-color: var(--rouge);
color: var(--blanc);
padding: 0.25rem 0.5rem;
border-radius: 1.5rem;
line-height: 1;
text-transform: uppercase
}
.liste-offres .item .liens{
display: flex;
align-items: center;
justify-content: space-between;
gap:0 1rem;
margin-top:1rem;
}
.liste-offres .item .liens a{
flex: 0 1 50%;
padding: 0.5rem;
background-color: var(--noir);
color: var(--blanc)
}
.liste-offres .item .liens a:hover{
background-color: var(--bleu)
}
.liste-offres .item .resume{
font-size:1rem;
margin:1rem 0;
text-align: left
}
.px-0{
padding-left:0; padding-right: 0;
}
.metiers .row > div{
display: flex;
}
.metiers .metier{
display: flex;
flex-direction: column;
align-items: stretch;
background-color: var(--blanc);
flex:1 1 auto;
margin-bottom:2rem;
}
.metiers .metier .titre{
font-weight: bold;
font-size:1.25rem;
color: var(--blanc);
background-color: var(--bleu);
padding:1rem 1.5rem
}
.metiers .metier .titre span{
display: block;
font-weight: normal;
font-size: 0.7em;
margin-bottom:0.5rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
}
.metiers .metier .vs{
background-color: var(--blanc);
}
.metiers .metier .vs img{
object-fit: cover;
filter: grayscale(1);
}
.metiers .metier .descriptif{
background-color: var(--blanc);
padding:1.5rem;
}
.contenu a.square{
width:125px;
height:125px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--bleu);
color: var(--blanc);
padding:1rem;
box-sizing: border-box;
text-align: center
}
.contenu a.square:hover{
background-color: var(--noir)
}
.contenu a.square .ico{
width:30px; height: 30px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.contenu a.square.download .ico{
background-image:url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/download.svg);
}
footer {
overflow-x: hidden;
}
footer ul {
margin: 0;
padding: 0;
list-style: none;
}
footer {
background-color: #393d42;
}
footer,
footer a {
color: #fff;
}
footer a:hover {
color: #9c9ea1;
}
footer .border-l {
border-top: 1px solid #9c9ea1;
}
footer .logo {
padding: 1rem 10%;
}
footer .logo img {
max-width: 120px;
}
footer .menu-bas {
border-top: 1px solid #9c9ea1;
padding-top: 1rem;
padding-bottom: 1rem;
}
footer .menu-bas ul:after {
content: "";
display: block;
clear: both;
}
footer .menu-bas ul li {
float: left;
font-size: 0.8rem;
margin-right: 1rem;
}
footer .menu-bas ul li a {
display: block;
padding: 0.5rem 0;
color: #9c9ea1;
}
footer .menu-bas ul li a:hover {
color: #fff;
}
footer .infos,
footer .nav-bas {
padding-left: 10%;
}
footer .certif {
border-top: 1px solid #9c9ea1;
padding: 2rem 10%;
}
footer .row {
margin-left: -1rem;
margin-right: -1rem;
}
footer .rezo {
text-align: left;
margin: 2rem 0 0;
}
footer .rezo ul li {
display: inline-block;
vertical-align: middle;
}
footer .rezo ul li a {
display: block;
width: 2em;
height: 2em;
overflow: hidden;
text-indent: 2em;
white-space: nowrap;
background-position: 50%;
background-size: 80%;
background-repeat: no-repeat;
}
footer .rezo ul li.ytu a {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/ytu-01.svg);
}
footer .rezo ul li.lkd a {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/lkd-01.svg);
}
footer .nav-bas ul {
margin: 1rem 0;
}
footer .nav-bas ul li {
text-align: left;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.1rem;
}
footer .nav-bas ul li a {
display: inline-block;
padding: 0.5rem 0;
}
footer .infos .textwidget {
display: inline-block;
vertical-align: middle;
}
footer .infos .adresse,
footer .infos .email,
footer .infos .phone {
margin: 1rem 0;
}
footer .infos .adresse:before,
footer .infos .email:before,
footer .infos .phone:before {
content: "";
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
background-position: 50%;
background-size: cover;
background-repeat: no-repeat;
margin-right: 0.25rem;
}
footer .infos .phone:before {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/phone-01-bl.svg);
}
footer .infos .email:before {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/email-01-bl.svg);
}
footer .infos .adresse:before {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/adresse-01-bl.svg);
}
footer .wdg {
display: block;
text-align: left;
font-size: 0.8rem;
padding-left: 2rem;
background: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/coche-bl-01.svg) no-repeat 0 0/20px;
}
footer .wdg h2 {
font-size: 0.9rem;
margin: 0;
}
footer .wdg p {
margin: 0.2rem 0;
color: #9c9ea1;
}
footer .picto-usine {
width: 60px;
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/usine-futur-bl-01.svg);
display: block;
margin: 1rem 0;
}
footer .picto-usine.en {
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/usine-futur-bl-en-01.svg);
}
@media screen and (min-width: 1280px) {
section.news a.swiper-slide .vgn .over {
position: absolute;
left: 0;
top: 0;
width: 100%;
background-color: rgba(18, 70, 128, 0.7);
transition: all 0.3s ease-out;
opacity: 0.15;
}
section.news a.swiper-slide:hover .vgn .over {
opacity: 1;
}
section.news a.swiper-slide .vgn .trait {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #fff;
width: 0;
height: 1px;
opacity: 0;
transition: all 0.3s ease-out;
}
section.news a.swiper-slide:hover .vgn .trait {
opacity: 1;
width: 60px;
}
section.news a.swiper-slide .vgn .trait.dx {
-webkit-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
}
section.news .swiper-container {
padding: 2rem 5%;
}
.swiper-button-prev,
section.news .swiper-container .swiper-button-next {
display: block;
width: 35px;
height: 97px;
background-repeat: no-repeat;
background-size: cover;
background-image: url(//www.bene-solutions.com/wp-content/themes/hors-lignes/img/prev-next-01.svg);
margin: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
section.news .swiper-container .swiper-button-next {
background-position: 100%;
}
section.news .swiper-container .swiper-button-prev {
background-position: 0;
}
footer .infos-bas {
margin-left: 2rem;
}
footer .border-l {
border-left: 1px solid #9c9ea1;
}
footer .nav-bas ul {
margin: 2.5rem 0;
}
footer .certif,
footer .infos,
footer .nav-bas {
border-top: none;
padding-left: 0;
}
}
@media screen and (min-width: 1680px) {
section.news,
section.secteurs {
padding: 3rem 15%;
}
.swiper-button-prev,
section.news .swiper-container .swiper-button-next {
display: block;
width: 45px;
height: 125px;
}
footer .infos-bas {
margin-left: 6rem;
}
}