:root {
--maxwidth: 1200px;
--maxwidth2: 1280px;
--maxwidth3: 1400px;
--maxwidth4: 1600px;
--font1: 'Poppins', arial, sans-serif;
--baseFontSize: 10px;
--remFontSize: 1.6rem;
--fontRatio: 1.33;
--fontSize300: calc(var(--remFontSize) / var(--fontRatio)); --fontSize400: var(--remFontSize); --fontSize500: calc(var(--fontSize400) * var(--fontRatio)); --fontSize600: calc(var(--fontSize500) * var(--fontRatio)); --fontSize700: calc(var(--fontSize600) * var(--fontRatio)); --fontSize800: calc(var(--fontSize700) * var(--fontRatio)); --fontSize900: calc(var(--fontSize800) * var(--fontRatio)); --fontSize1000: calc(var(--fontSize900) * var(--fontRatio)); --black: #001f27;
--black2: #606060;
--white: #ffffff;
--grey: #f6f6f6;
--green: #c3d500;
--greenLight: #f8fae0;
--blue: #59d0ca;
--blueLight: #d1fcfa;
--blueDark: #0a282f;
--expoInOut: cubic-bezier(.8,-0.05,.2,1.05);
}
.wp-block-columns {
width: 100%;
}
.wp-block-column h3 mark {
display: inline;
}
@media (max-width: 768px) {
.wp-block-columns {
margin-left: 0!important;
margin-right: 0!important;
padding-left: 0!important;
padding-right: 0!important;
}
.wp-block-column {
margin: 0!important;
padding-left: 0!important;
padding-right: 0!important;
}
.wp-block-column.has-background {
padding: 20px!important;
}
.wp-block-column.has-background h2,
.wp-block-column.has-background h3,
.wp-block-column.has-background h4,
.wp-block-column.has-background h5 {
margin-top: 2rem;
}
}
.has-black-color {color: var(--black)}
.has-black-background-color {background-color: var(--black)}
.has-black2-color {color: var(--black2)}
.has-black2-background-color {background-color: var(--black2)}
.has-white-color {color: var(--white)}
.has-white-background-color {background-color: var(--white)}
.has-green-color {color: var(--green)}
.has-green-background-color {background-color: var(--green)}
.has-green-light-color {color: var(--greenLight)}
.has-green-light-background-color {background-color: var(--greenLight)}
.has-blue-color {color: var(--blue)}
.has-blue-background-color {background-color: var(--blue)}
.has-blue-light-color {color: var(--blueLight)}
.has-blue-light-background-color {background-color: var(--blueLight)}
.has-blue-dark-color {color: var(--blueDark)}
.has-blue-dark-background-color {background-color: var(--blueDark)}
@media (max-width: 1680px) {
:root {
--maxwidth4: calc(100% - 80px);
}
}
@media (max-width: 1480px) {
:root {
--maxwidth3: calc(100% - 80px);
}  
}
@media (max-width: 1360px) {
:root {
--maxwidth2: calc(100% - 80px);
}
}
@media (max-width: 1280px) {
:root {
--maxwidth: calc(100% - 80px);
}
}
@media (max-width: 1440px) {
:root {
--baseFontSize: 9px;
--fontSize1000: var(--fontSize900);
}
}
@media (max-width: 800px) {
:root {
--maxwidth: calc(100% - 40px);
--maxwidth2: calc(100% - 40px);
--maxwidth3: calc(100% - 40px);
--maxwidth4: calc(100% - 40px);
--baseFontSize: 8px;
--fontSize1000: var(--fontSize800);
--fontSize900: var(--fontSize800);
}
}
@media (max-width: 400px) {
:root {
--fontSize1000: var(--fontSize700);
--fontSize900: var(--fontSize700);
--fontSize800: var(--fontSize700);
}
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
font-size: var(--baseFontSize);
overflow: auto;
scroll-behavior: smooth;
scroll-padding-top: 200px;
}
body {
position: relative;
width: 100%;
max-width: 100%;
margin: 0;
font-family: var(--font1);
font-size: var(--fontSize400);
color: var(--black);
overflow: hidden;
}
#page {
min-height: 100vh;
justify-content: space-between;
}
.main {
width: 100%;
max-width: var(--maxwidth);
}
h1 {
margin: 2rem 0;
font-size: var(--fontSize900);
font-weight: 400;
}
h2 {
margin: 2rem 0;
font-size: var(--fontSize700);
font-weight: 400;
}
h3 {
margin: 2rem 0;
font-size: var(--fontSize600);
font-weight: 400;
}
h4 {
margin: 2rem 0;
font-size: var(--fontSize500);
font-weight: 400;
}
h5 {
margin: 2rem 0;
font-size: var(--fontSize500);
font-weight: 400;
}
h1, h2, h3, h4, h5 {
width: 100%;
line-height: 120%;
}
h3, h4, h5 {
line-height: 140%;
}
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, p strong, ul strong, ol strong {
font-weight: 600;
} a {
color: inherit;
}
p, ul, ol {
width: 100%;
margin: 1.33rem 0;
color: var(--black2);
}
ul li, ol li {
font-size: var(--fontSize400);
}
p {
font-size: var(--fontSize400);
line-height: 180%;
}
p.big, .big p {
font-size: 2rem;
font-weight: 600;
}
.has-medium-font-size p {
font-size: 20px;
}
blockquote {
width: 100%;
margin: 0;
}
figure {
display: flex;
margin: 0;
}
img {
max-width: 100%;
}
img.aligncenter {
display: block;
margin: 0 auto;
}
mark.has-inline-color {
display: inline-block; 
line-height: 90%;
}
mark.has-inline-color.has-black-color,
mark.has-inline-color.has-black2-color,
mark.has-inline-color.has-white-color,
mark.has-inline-color.has-green-color,
mark.has-inline-color.has-green-light-color,
mark.has-inline-color.has-blue-color,
mark.has-inline-color.has-blue-light-color,
mark.has-inline-color.has-blue-dark-color {
line-height: unset;
}
@media (max-width: 768px) {
.hide-on-mobile {
display: none;
}
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.flex__col {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.links {
width: 100%;
justify-content: flex-start;
flex-flow: wrap;
gap: 2rem;
margin: 3rem 0;
}
.links.center {
justify-content: center;
}
.links.Om {
margin: 0;
}
.block-editor-block-list__block.wp-block-spacer {
background-color: rgba(0,0,0,0.05);
}
.wp-block-cover, .wp-block-cover-image {
width: 100vw;
padding: 0;
}
.bg--contain .wp-block-cover__image-background {
object-fit: contain;
object-position: top left;
}
.wp-block-column .wp-block-cover {
width: 100%;
}
.wp-block-cover.aligncenter {
width: 100%;
}
.block-editor-block-list__block.wp-block-cover {
max-width: 100%;
}
.wp-block-cover__inner-container {
width: 100%;
max-width: var(--maxwidth);
margin: 0 auto;
}
.error-404, .searchPage {
margin: 4rem 0 12rem 0;
}
.error-404 h1 {
text-align: center;
}
.btnwysiwyg {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.btnwysiwyg p {
display: flex;
justify-content: flex-start;
align-items: flex-start;
width: auto;
gap: 1rem;
}
.btn, .wp-element-button, .btnwysiwyg a {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
min-width: 15rem;
padding: 0.8rem 2.4rem;
font-size: var(--fontSize550);
font-weight: 600;
text-decoration: none;
text-align: center;
background-color: var(--black);
color: var(--white);
border-radius: 100px;
box-sizing: border-box;
border: 0.2rem solid var(--black);
cursor: pointer;
overflow: hidden;
transition: all 0.3s var(--expoInOut);
}
.btn.small {
min-width: 15rem;
padding: 0.4rem 1rem;
font-size: var(--fontSize400);
}
.btn:hover, .btn.active {
color: var(--black);
background: var(--white);
}
.btn.blue, .wp-element-button.has-blue-background-color {
background-color: var(--blue);
color: var(--white);
border-color: var(--blue);
}
.btn.blue:hover, .wp-element-button.has-blue-background-color:hover,
.btn.blue.active, .wp-element-button.has-blue-background-color.active {
color: var(--blue);
background: var(--white);
}
.btn.green, .wp-element-button.has-green-background-color {
background-color: var(--green);
color: var(--white);
border-color: var(--green);
}
.btn.green:hover, .wp-element-button.has-green-background-color:hover,
.btn.green.active, .wp-element-button.has-green-background-color.active {
color: var(--green);
background: var(--white);
}
.wp-element-button.has-blue-color {
color: var(--blue);
border-color: var(--blue);
}
.wp-element-button.has-blue-color:hover,
.wp-element-button.has-blue-color.has-white-background-color:hover,
.wp-element-button.has-blue-color.has-white-background-color.active {
color: var(--white);
background: var(--blue);
background-color: var(--blue)!important;
}
.wp-element-button.has-green-color {
color: var(--green);
border-color: var(--green);
}
.wp-element-button.has-green-color:hover,
.wp-element-button.has-green-color.has-white-background-color:hover,
.wp-element-button.has-green-color.has-white-background-color.active {
color: var(--white);
background: var(--green);
background-color: var(--green)!important;
}
@media (max-width: 768px) {
.wp-block-buttons {
margin: 3rem 0;
}
.wp-block-heading strong,
.h1 strong, .h2 strong, .h3 strong, .h4 strong, .h5 strong, .h6 strong,
.h1 mark, .h2 mark, .h3 mark, .h4 mark, .h5 mark, .h6 mark,
p.has-text-align-center.has-medium-font-size strong,
p.has-text-align-center.has-medium-font-size mark {
display: inline;
}
.align-left-mobile {text-align: left!important;}
.br-none-mobile br {display: none;}
h1 br, h2 br, h3 br, h4 br, h5 br, h6 br,
p.has-medium-font-size br {
display: none;
}
p.has-medium-font-size {
line-height: 160%;
}
.gap-0-mobile {gap: 0!important;}
.gap-1-mobile {gap: 1rem!important;}
.gap-2-mobile {gap: 2rem!important;}
.gap-3-mobile {gap: 3rem!important;}
.gap-4-mobile {gap: 4rem!important;}
.gap-5-mobile {gap: 5rem!important;}
.gap-6-mobile {gap: 6rem!important;}
.gap-7-mobile {gap: 7rem!important;}
.gap-8-mobile {gap: 8rem!important;}
.gap-9-mobile {gap: 9rem!important;}
.gap-10-mobile {gap: 10rem!important;}
.height-0-mobile {height: 0!important;}
.height-1-mobile {height: 1rem!important;}
.height-2-mobile {height: 2rem!important;}
.height-3-mobile {height: 3rem!important;}
.height-4-mobile {height: 4rem!important;}
.height-5-mobile {height: 5rem!important;}
.height-6-mobile {height: 6rem!important;}
.height-7-mobile {height: 7rem!important;}
.height-8-mobile {height: 8rem!important;}
.height-9-mobile {height: 9rem!important;}
.height-10-mobile {height: 10rem!important;}
}
.text__gradient {
background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.btn.gradient {
background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
color: var(--white);
border: unset;
padding: 1rem 2.6rem;
}
.btn.border {
background-color: #fff;
color: var(--black);
}
.btn.border.blue {
border-color: var(--blue);
color: var(--blue);
}
.btn.border.green {
border-color: var(--green);
color: var(--green);
}
.btn.border:hover,
.btn.border.active {
background-color: var(--black);
color: var(--white);
}
.btn.border.blue:hover,
.btn.border.blue.active {
background-color: var(--blue);
color: var(--white);
}
.btn.border.green:hover,
.btn.border.green.active {
background-color: var(--green);
color: var(--white);
}
.big, .big h1, .big h2, .big h3, .big h4, .big h5, .big h6 {
font-size: var(--fontSize550)!important;
}
.header {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
transition: all 0.3s;
}
body.admin-bar .header {
top: 33px;
}
.header.active {
background-color: var(--white);
}
.header__pre {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--maxwidth2);
justify-content: flex-end;
gap: 2rem;
padding: 0 4rem;
box-sizing: border-box;
background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
.header__pre__menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.header__pre__menu ul li a {
padding: 1rem;
font-size: 1.4rem;
font-weight: 600;
color: var(--white);
background-color: transparent;
text-decoration: none;
border-radius: 100px;
transition: all 0.3s;
}
.header__pre__menu ul li a:hover {
background-color: var(--black);
}
.header__pre__rs {
gap: 0.2rem;
}
.header__pre__rs a {
width: 40px;
height: 40px;
border-radius: 100%;
background-color: transparent;
transition: all 0.3s;
}
.header__pre__rs a:hover {
background-color: var(--black);
}
.header__pre__rs a img {
width: 20px;
height: 20px;
object-fit: contain;
}
.header__pre__buttons {
gap: 1rem;
font-size: 1.4rem;
transform: translateY(50%);
}
.header__inner {
position: relative;
width: 100%;
max-width: var(--maxwidth2);
justify-content: space-between;
gap: 2rem;
padding: 2rem 4rem;
box-sizing: border-box;
}
.header__logo {
position: relative;
width: 100%;
max-width: 200px;
aspect-ratio: 200/65;
}
.header__logo a, .header__logo a img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
aspect-ratio: 200/65;
}
.header__logo a img:last-child {
opacity: 0;
}
.header.active .header__logo a img:last-child {
opacity: 1;
}
.header.active .header__logo a img:first-child {
opacity: 0;
}
.header__menu {
}
.header__menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.header__menu ul li a {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 1rem;
font-size: 1.4rem;
font-weight: 600;
color: var(--white);
background-color: transparent;
text-decoration: none;
border-radius: 100px;
transition: all 0.3s;
}
.header.active .header__menu ul li a {
color: var(--blue);
}
.header__menu ul li a:hover {
background-color: var(--green);
}
.header.active .header__menu ul li a:hover {
color: var(--white);
}
.header__menu ul li.header__menu__hassubmenu a::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 1px;
height: 3.2rem;
background-color: var(--green);
opacity: 0;
visibility: hidden;
transition: all 0.2s;
}
.header__menu ul li.header__menu__hassubmenu:hover a::after {
opacity: 1;
visibility: visible;
}
.header__submenu {
position: absolute;
z-index: 999;
top: 100%;
left: 50%;
width: 100vw;
transform: translateX(-50%);
background-color: var(--black);
opacity: 0;
visibility: hidden;
transition: all 0.2s;
}
.header__submenu::before {
content: "";
position: absolute;
bottom: 100%;
left: 0;
width: 100%;
height: 3.5rem;
visibility: hidden;
}
.header__menu ul li:hover .header__submenu::before {
visibility: visible;
}
.header__menu ul li:hover .header__submenu {
opacity: 1;
visibility: visible;
}
.header__submenu__inner {
position: relative;
width: 100%;
max-width: var(--maxwidth4);
align-items: stretch;
}
.header__menu ul.header__submenu__list {
width: 40%;
align-items: flex-start;
padding: 4rem 0;
}
.header__menu ul li .header__submenu__list li {
max-width: calc(100% - 10px);
}
.header__menu ul li .header__submenu__list li a, .header.active .header__menu ul li .header__submenu__list li a {
font-size: 1.5rem;
font-weight: 500;
line-height: 160%;
padding: 0.8rem 1.6rem;
color: var(--white);
}
.header .header__menu ul li .header__submenu__list li a::after {
display: none;
}
.header__menu ul li .header__submenu__list li a:hover {
background-color: var(--black);
}
.header__submenu__list li.header__submenu__list__title {
font-size: var(--fontSize500);
font-weight: 600;
color: var(--black);
padding: 1rem 1.6rem;
}
.header__submenu__inner::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 60%;
width: 50vw;
height: 100%;
background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
}
.header__submenu__noimg.header__submenu__inner::before {
right: unset;
left: 50%;
width: 100vw;
transform: translateX(-50%);
}
.header__submenu__images {
width: 60%;
align-items: center;
box-sizing: border-box;
padding: 2rem 2rem 3rem 4rem;
}
.header__submenu__images__inner {
width: 100%;
align-items: stretch;
gap: 6rem;
}
.header__menu ul li .header__submenu__images a {
position: relative;
width: 50%;
padding: 0;
align-items: flex-start;
margin-bottom: auto;
}
.header__menu ul li .header__submenu__images a:hover {
background-color: transparent
}
.header__menu ul li .header__submenu__images a::after {
display: none;
}
.header__menu ul li .header__submenu__images a:first-child::before {
content: "";
position: absolute;
top: 0;
left: calc(100% + 3rem);
width: 1px;
height: 100%;
background-color: var(--green);
}
.header__submenu__images figure {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
.header__submenu__images figure img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.header__submenu__images__title {
font-size: var(--fontSize500);
color: var(--green);
font-weight: 600;
margin: 3rem 0 2rem 0;
}
.header__menu__dropdown {
display: none;
}
.hiddenMobile {
display: none;
}
#burger {
display: none;
}
@media (max-width: 1440px) {
.header__menu ul li.header__menu__hassubmenu a::after {
height: 3.8rem;
}
}
@media (max-width: 1280px) {
.header__inner {
position: unset;
max-width: 100%;
height: 80px;
padding: 2rem;
background-color: var(--white);
}
.header__pre {
display: none;
}
.header__logo {
width: auto;
height: 100%;
}
.header__logo a img:first-child {
opacity: 0;
}
.header__logo a img:last-child {
opacity: 1;
}
#burger {
display: flex;
position: relative;
width: 40px;
height: 40px;
padding: 10px;
cursor: pointer;
overflow: hidden;
}
#burger div {
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 3px;
background-color: var(--black);
border-radius: 100px;
transform: translate(-50%, -50%);
transition: all 0.5s var(--expoInOut);
}
#burger div:nth-child(1) {
transform: translate(-50%, -50%) translateY(-10px);
}
#burger div:nth-child(3) {
transform: translate(-50%, -50%) translateY(10px);
}
#burger.active div:nth-child(1) {
transform: translate(-50%, -50%) translateY(0) rotate(-45deg);
}
#burger.active div:nth-child(2) {
transform: translate(-50%, -50%) translateX(200%);
}
#burger.active div:nth-child(3) {
transform: translate(-50%, -50%) translateY(0) rotate(45deg);
}
.header__menu {
position: absolute;
z-index: -1;
top: 80px;
left: 0;
width: 100vw;
height: calc(100vh - 105px);
justify-content: flex-start;
align-items: flex-start;
background-color: var(--black);
overflow-y: auto;
padding-top: 5px;
padding-bottom: 20px;
transform: translateX(100%);
transition: all 0.5s var(--expoInOut);
}
.header__menu.active {
transform: translateX(0);
}
.header__menu ul {
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 0.5rem;
}
.header__menu ul li {
width: 100%;
}
.header__menu ul li a {
justify-content: flex-start;
font-size: 1.5rem;
border-bottom: 1px solid var(--green);
border-radius: 0;
}
.header.active .header__menu ul li a {
color: var(--white);
}
.header.active .header__menu ul li a:hover {
color: var(--blue);
background-color: transparent
}
.header__menu ul li.header__menu__hassubmenu a::after {
display: none;
}
.header__menu ul li.header__menu__hassubmenu {
position: relative;
}
.header__menu ul li.header__menu__hassubmenu .header__menu__dropdown {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 2;
top: 0;
right: 0;
width: 32px;
height: 32px;
border: 1px solid var(--green);
cursor: pointer;
}
.header__menu ul li.header__menu__hassubmenu .header__menu__dropdown img {
width: 20px;
height: auto;
transition: all 0.3s ease;
}
.header__menu__hassubmenu.active .header__menu__dropdown img {
transform: rotate(-180deg);
}
.header__submenu {
position: unset;
top: unset;
left: unset;
width: 100%;
opacity: 1;
visibility: visible;
transform: unset;
height: 0;
overflow: hidden;
}
.header__menu__hassubmenu.active .header__submenu {
height: auto;
}
.header__submenu__inner {
padding: 20px 0 10px 0;
flex-direction: column;
}
.header__submenu__inner::before {
display: none;
}
.header__menu ul.header__submenu__list {
width: 100%;
padding: 0;
gap: 1rem;
}
.header__submenu__list li.header__submenu__list__title {
padding: 0;
color: var(--white);
}
.header__submenu__images {
display: none;
width: 100%;
padding: 0;
margin-top: 1rem;
}
.header__submenu__images__inner {
flex-direction: column;
gap: 1rem;
}
.header__menu ul li .header__submenu__images a {
width: 100%;
}
.header__submenu__images figure, .header__submenu__images .btn {
display: none;
}
.header__submenu__images__title {
margin: 0;
font-size: 1.5rem;
font-weight: 500;
color: var(--white);
}
.header__menu ul li .header__submenu__list li a, .header.active .header__menu ul li .header__submenu__list li a {
padding: 0;
justify-content: flex-start;
}
.header__menu ul.header__submenu__list a, .header__menu ul li .header__submenu__images a {
border-bottom: unset;
}
li.hiddenMobile {
display: block;
}
.header__pre__rs.hiddenMobile {
display: flex;
margin-top: 1rem;
align-self: flex-end;
}
}
.footer {
position: relative;
z-index: 2;
width: 100vw;
background-color: var(--black);
}
.footer__bg {
position: absolute;
z-index: -1;
bottom: 65px;
right: 0;
width: 45vw;
max-height: 60%;
height: auto;
object-fit: contain;
object-position: bottom right;
}
.footer__inner {
width: 100%;
max-width: var(--maxwidth);
color: var(--white);
}
.footer__inner a {
color: var(--white);
text-decoration: none;
transition: all 0.3s;
}
.footer__inner a:hover {
color: var(--green);
}
.footer__inner a.btn.gradient:hover {
color: var(--white);
}
.footer__header {
width: 100%;
gap: 2rem;
justify-content: space-between;
margin: 4rem 0 1.6rem 0;
}
.footer__header__title {
width: 55%;
font-size: var(--fontSize600);
font-weight: 600;
line-height: 130%;
background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.footer__header__expert {
width: auto;
gap: 2rem 3.5rem;
}
.footer__header__expert figure {
position: relative;
width: 128px;
min-width: 128px;
height: 128px;  
border-radius: 100%;
}
.footer__header__expert figure::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 3px solid var(--green);
box-sizing: border-box;
border-radius: 100%;
animation: flow 2s linear infinite;
}
.footer__header__expert figure img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
object-fit: cover;
opacity: 0;
transition: all 1s;
}
.footer__header__expert figure img.active {
opacity: 1;
transition: all 0.5s;
}
.footer__buttons {
position: relative;
z-index: 2;
width: 100%;
flex-flow: wrap;
gap: 2rem;
}
.footer__buttons::before {
content: "";
position: absolute;
z-index: -1;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: var(--green);
transform: translateY(-50%);
}
.footer__menus {
width: 100%;
align-items: flex-start;
flex-flow: wrap;
gap: 2rem 4rem;
margin: 4rem 0;
}
.footer__col {
width: calc(33.33% - 2.6667rem);
justify-content: flex-start;
align-items: flex-start;
}
.footer__logo {
width: 100%;
max-width: 212px;
aspect-ratio: 200/65;
margin-bottom: 1rem;
}
.footer__menu ul {
width: 100%;
align-items: flex-start;
gap: 0.6rem;
margin: 0;
padding: 0;
list-style: none;
}
.footer__inner .footer__menu .menu__title, .footer__inner .footer__menu .menu__title a {
font-weight: 600;
color: var(--blue);
margin-top: 1.6rem;
margin-bottom: 1.6rem;
}
.footer__address {
line-height: 200%;
}
.footer__rs {
gap: 0.2rem;
}
.footer__rs a {
width: 40px;
height: 40px;
border-radius: 100%;
background-color: transparent;
transition: all 0.3s;
}
.footer__rs a:hover {
background-color: var(--green);
}
.footer__rs a img {
width: 20px;
height: 20px;
object-fit: contain;
}
.footer__mentions {
position: relative;
z-index: 2;
width: 100vw;
margin-top: 5rem;
padding: 2rem 0 6rem 0;
}
.footer__mentions img {
position: absolute;
top: 0;
right: 4rem;
width: 229px;
height: auto;
transform: translateY(-50%);
}
@media (max-width: 1280px) {
.footer__mentions img {
position: initial;
}
}
.footer__mentions::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
}
.footer__mentions__inner {
width: 100%;
max-width: var(--maxwidth);
}
.footer__mentions .footer__menu ul {
flex-flow: wrap;
}
.footer__mentions .no__link a:hover {
color: var(--white);
}
.footer__mentions a:hover {
color: var(--black);
}
.footer__mentions ul li::after {
content: "|";
margin-left: 0.6rem;
color: var(--white);
}
.footer__mentions ul li:last-child::after {
content: "";
}
@media (max-width: 768px) {
.footer__header {
flex-direction: column;
align-items: flex-start;
}
.footer__header__title {
width: 100%;
}
.footer__header__expert {
align-self: flex-end;
}
.footer__header__expert figure {
width: 100px;
min-width: 100px;
height: 100px;
}
.footer__header {
margin-bottom: 4rem;
}
.footer__menus {
justify-content: space-around;
flex-flow: wrap;
}
.footer__col {
width: auto;
}
}
@media (max-width: 451px) {
.footer__menus {
justify-content: center;
flex-flow: wrap;
}
.footer__col {
width: 100%;
max-width: 350px;
}
}
.intro {
position: relative;
width: 100vw;
min-height: 75vh;
}
.intro .introfig {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.intro .introfig::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; background-color: #134356;
opacity: 0.8;
}
.intro .introfig img {
width: 100%;
height: 100%;
object-fit: cover;
}
.intro__text {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--maxwidth);
text-align: center;
color: var(--white);
margin: 12rem 0 8rem 0;
}
.intro__text p {
color: var(--white);
}
.intro__text h1 {
margin: 0;
}
.intro__text h1 strong {
font-weight: 700;
}
.intro::after {
content: "";
position: absolute;
bottom: -1px;
left: 50%;
width: 100%;
max-width: var(--maxwidth3);
height: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
background-color: var(--white);
transform: translateX(-50%);
}
.intro__fig__1, .intro__fig__2, .intro__fig__3 {
position: absolute;
bottom: 99px;
left: calc(50% - 500px);
width: 9vw;
max-width: 60px;
height: auto;
aspect-ratio: 1/1;
background-color: var(--white);
}
.intro__fig__2 {
left: calc(50% - 650px);
bottom: 250px;
background-color: var(--green);
}
.intro__fig__3 {
left: calc(50% + 500px);
bottom: 50vh;
background-color: var(--blue);
}
.intro__fig__4 {
position: absolute;
bottom: -2px;
right: 0;
width: 12vw;
height: 60vh;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/bg_bandeau_oz.svg);
background-position: bottom center;
background-repeat: no-repeat;
background-size: contain;
}
@media (max-width: 1440px) {
.intro {
min-height: 100vh;
}
}
@media (max-width: 1380px) {
.intro::after {
max-width: 100%;
height: 50px;
}
}
@media (max-width: 768px) {
.intro br {
display: none;
}
}
.intropage {
min-height: 62vh;
}
.intropage .introfig::after {
background-color: #134356;
opacity: 0.8;
}
.intropage__inner {
position: relative;
z-index: 2;
justify-content: flex-start;
width: 100%;
max-width: var(--maxwidth);
}
.intropage .intro__text {
width: 50%;
padding: 0 5%;
align-items: flex-start;
margin: 20rem 0;
}
.intropage .intro__text h1 {
font-size: calc(var(--fontSize800) - 0.5rem);
}
.intropage .intro__text p {
max-width: 500px;
}
.intropage .intro__text * {
text-align: left;
}
.intropage__expert {
position: absolute;
z-index: 2;
bottom: 0;
left: 50%;
width: 100%;
max-width: var(--maxwidth);
transform: translateX(-50%);
}
.intropage__expert__inner {
position: absolute;
z-index: 2;
right: 3rem;
bottom: 99px;
width: 300px;
padding: 0 2rem 4rem 2rem;
box-sizing: border-box;
}
.intropage__expert__inner::before {
content: "";
position: absolute;
z-index: -1;
top: 6.5rem;
left: 0;
width: 100%;
height: calc(100% - 6.5rem);
background-color: var(--blue);
}
.intropage__expert * {
color: var(--white);
}
.intropage__expert p {
font-size: 1.4rem;
text-align: center;
text-wrap: balance;
}
.intropage__expert br {
display: block;
}
.intropage__expert figure {
position: relative;
width: 13rem;
height: 13rem;
border-radius: 100%;
background-color: var(--blue);
}
.intropage__expert figure::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 3px solid var(--blue);
box-sizing: border-box;
border-radius: 100%;
animation: flow 2s linear infinite;
}
.intropage__expert a.btn {
padding: 0.8rem;
text-wrap: balance;
}
@keyframes flow {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
.intropage__expert img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
object-fit: cover;
opacity: 0;
transition: all 1s;
}
.intropage__expert img.active {
opacity: 1;
transition: all 0.5s;
}
.intropage .intro__fig__1,
.intropage .intro__fig__2 {
width: 3vw;
max-width: 30px;
}
.intropage .intro__fig__1 {
bottom: 99px;
left: calc(50% - 580px);
}
.intropage .intro__fig__2 {
bottom: 200px;
left: calc(50% - 700px);
background-color: var(--blue);
}
.intropage .intro__fig__4 {
bottom: 0;
left: calc(100% + 180px);
width: 6vw;
height: 35vh;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/pattern_oz_2_blanc.svg);
background-position: center 22%;
background-repeat: no-repeat;
background-size: cover;
}
@media (max-width: 1380px) {
.intropage__expert__inner {
bottom: 49px;
}
}
@media (max-width: 768px) {
.intropage {
min-height: 0;
}
.intropage .intro__text {
width: 100%;
padding: 0;
align-items: flex-start;
margin: 18rem 0 0 0;
}
.intropage__expert {
position: relative;
bottom: unset;
left: unset;
transform: unset;
align-items: flex-end;
margin-top: 4rem;
margin-bottom: 49px;
}
.intropage__expert__inner {
position: relative;
bottom: unset;
right: unset;
margin-right: 4rem;
max-width: 80%;
}
.intropage__no__expert {
height: 40px;
margin-bottom: 8rem;
}
}
.accordeon {
width: 100%;
background-color: var(--blue);
padding: 4rem;
box-sizing: border-box;
}
.accordeon__item {
position: relative;
width: 100%;
align-items: flex-start;    
overflow: hidden;
padding: 2rem 0;
border-bottom: 1px solid var(--black);
}
.accordeon__item:first-child {
padding-top: 0;
}
.accordeon__item:last-child {
padding-bottom: 0;
border-bottom: none;
}
.accordeon__item__title {
position: relative;
width: 100%;
color: #fff;
cursor: pointer;
}
.accordeon__item__title span {
display: block;
width: calc(100% - 40px);
}
.accordeon__item__title__icon {
position: relative;
width: 20px;
height: 20px;
margin: 0 20px;
}
.accordeon__item__title__icon::before,
.accordeon__item__title__icon::after {
content: "";
position: absolute;
width: 20px;
height: 3px;
background-color: var(--black);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.accordeon__item__title__icon::before {
transform: translate(-50%, -50%);
}
.accordeon__item__title__icon::after {
transform: translate(-50%, -50%) rotate(-90deg);
transition: transform 0.5s var(--expoInOut);
}
.accordeon__item__title.active .accordeon__item__title__icon::after {
transform: translate(-50%, -50%) rotate(0deg);
}
.accordeon__item__content {
width: 100%;
height: 0;
overflow: hidden;
}
.accordeon__item .links {
margin: 0;
}
.sliderClient {
position: relative;
width: 100vw;
background-color: var(--blueLight);
overflow: hidden;
}
.sliderClient__inner {
position: relative;
width: 100%;
max-width: var(--maxwidth);
padding-top: 6rem;
}
.sliderClient__bg {
position: absolute;
z-index: 1;
width: 20vw;
max-width: 400px;
height: auto;
aspect-ratio: 1/1;
object-fit: contain;
}
.sliderClient__bg__left {
top: -50px;
left: 0;
transform: translateX(-25%);
}
.sliderClient__bg__right {
bottom: 0;
right: 0;
transform: translateX(50%);
}
.sliderClient__separator {
margin: 2rem 0 4rem 0;
width: 20px;
height: 20px;
background-color: var(--blue);
}
.sliderClient__slider {
position: relative;
z-index: 2;
width: 100%;
justify-content: flex-end;
}
.sliderClient__slider__items {
overflow: hidden;
width: 80%;
cursor: grab;
}
.sliderClient__slider__item {
display: none;
width: 100%;
align-items: flex-start;
gap: 1rem 4rem;
}
.sliderClient__slider__item.active {
display: flex;
}
.sliderClient__slider__item__img {
width: calc(60% - 2rem);
height: auto;
align-self: center;
}
.sliderClient__slider__item__img img {
width: 100%;
height: auto;
}
.sliderClient__slider__item__text {
width: calc(40% - 2rem);
max-height: 260px;
overflow: auto;
margin-top: 7rem;
justify-content: flex-start;
align-items: flex-start;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding-right: 2rem;
box-sizing: border-box;
}
.sliderClient__slider__item__text::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.sliderClient__slider__item__text::-webkit-scrollbar-thumb {
background-color: var(--blue);
border-radius: 10px;
}
.sliderClient__slider__item__text::-webkit-scrollbar-track {
background-color: rgba(0,0,0,0.05);
}
.sliderClient__nav {
position: absolute;
top: 0;
right: 0;
gap: 1rem;
}
.sliderClient__nav__prev,
.sliderClient__nav__next {
width: 5rem;
height: auto;
cursor: pointer;
}
.sliderClient__nav__prev svg,
.sliderClient__nav__next svg {
width: 100%;
height: auto;
}
.sliderClient__nav__next {
transform: rotate(180deg);
}
.sliderClient__nav__prev svg circle,
.sliderClient__nav__next svg circle {
transition: all 0.3s ease;
}
.sliderClient__nav__prev:hover svg circle,
.sliderClient__nav__next:hover svg circle {
fill: var(--blue);
}
.sliderClient__nav__prev svg rect,
.sliderClient__nav__prev svg polygon,
.sliderClient__nav__next svg rect,
.sliderClient__nav__next svg polygon {
transition: all 0.3s ease;
}
.sliderClient__nav__prev:hover svg rect,
.sliderClient__nav__prev:hover svg polygon,
.sliderClient__nav__next:hover svg rect,
.sliderClient__nav__next:hover svg polygon {
fill: var(--black);
}
.sliderClient__bullet {
position: absolute;
top: 50%;
left: 0;
max-width: 20%;
transform: translateY(-50%);
gap: 4rem;
align-items: flex-start;
}
.sliderClient__bullet__item {
position: relative;
z-index: 2;
color: var(--black);
cursor: pointer;
gap: 2rem;
}
.sliderClient__bullet__item::after {
content: "";
position: absolute;
z-index: 1;
top: 50%;
left: 8px;
width: 1px;
height: calc(5rem + 100%);
background-color: var(--black);
}
.sliderClient__bullet .sliderClient__bullet__item:last-child::after {
display: none;
}
.sliderClient__bullet__item::before {
content: "";
position: relative;
z-index: 2;
display: inline-block;
width: 17px;
height: 17px;
border-radius: 50%;
background-color: var(--black);
transition: all 0.3s ease;
}
.sliderClient__bullet__item.active {
font-weight: 600;
color: var(--blue);
}
.sliderClient__bullet__item.active::before {
background-color: var(--blue);
transform: scale(1.5);
}
.sliderClient__inner .links {
justify-content: center;
margin: 1rem 0 0 0;
}
.sliderClient__inner .links a {
transform: translateY(75%);
}
.sliderClient__border {
width: 100vw;
background-color: var(--white);
}
.sliderClient__border div {
width: 100%;
max-width: var(--maxwidth3);
height: auto;
aspect-ratio: 1400/100;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
background-color: var(--blueLight);
}
@media (max-width: 1700px) {
.sliderClient__bg {
width: 15vw;
}
}
@media (max-width: 1280px) {
.sliderClient__slider {
flex-direction: column-reverse;
align-items: flex-start;
max-width: 800px;
}
.sliderClient__bullet {
display: none;
position: unset;
top: unset;
left: unset;
max-width: 100%;
transform: unset;
}
.sliderClient__nav {
position: unset;
top: unset;
right: unset;
align-self: flex-end;
margin: 1rem 0;
}
.sliderClient__slider__items {
width: 100%;
}
}
@media (max-width: 768px) {
.sliderClient__slider {
max-width: 450px;
}
.sliderClient__slider__item {
flex-direction: column;
}
.sliderClient__slider__item__text {
width: 100%;
margin-top: 0;
}
.sliderClient__slider__item__img {
width: 100%;
}
.sliderClient__bg {
display: none;
}
.sliderClient__border {
margin-top: 4rem;
}
}
.liste {
position: relative;
z-index: 2;
width: 100vw;
margin: 2rem 0;
overflow: hidden;
}
.liste::after {
content: "";
position: absolute;
z-index: -1;
top: 50%;
right: 100px;
width: 50vw;
height: auto;
aspect-ratio: 1/1;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/bg_logo.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transform: translate(50%, -50%);
}
.liste__inner {
position: relative;
width: 100%;
max-width: var(--maxwidth);
}
.liste__title {
width: 100%;
gap: 4rem 12.12rem;
}
.liste__title figure {
position: relative;
width: calc(50% - 6.06rem);
height: auto;
aspect-ratio: 1/1;
}
.liste__title figure .liste__title__img {
position: absolute;
top: 0;
right: 0;
width: 150%;
max-width: 50vw;
height: 100%;
object-fit: cover;
}
.liste__title figure .liste__title__pattern {
position: absolute;
top: -10%;
right: 100%;
width: auto;
height: 120%;
}
.liste__title__content {
width: calc(50% - 6.06rem);
}
.liste__title__content h2 em,
.liste__title__content h3 em,
.liste__title__content h4 em,
.liste__title__content h5 em {
font-style: normal;
background-color: transparent;
background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
}
.liste__items {
width: 100%;
gap: 4rem 12.12rem;
align-items: flex-start;
flex-flow: wrap;
margin-top: 12rem;
}
.liste__item__col {
width: calc(50% - 6.06rem);
max-width: var(--maxwidth3);
gap: 1rem;
}
.liste__item {
width: 100%;
align-items: flex-start;
gap: 2rem;
}
.liste__item__nbr {
position: relative;
width: 5.2rem;
height: 5.2rem;
}
.liste__item__nbr figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.liste__item__nbr figure img {
width: 100%;
height: 100%;
object-fit: contain;
}
.liste__item__nbr span {
font-size: var(--fontSize600);
}
.liste__item__content {
width: calc(100% - 7.2rem);
align-items: flex-start;
margin-top: 1rem;
}
.liste__item__content__title {
font-size: var(--fontSize500);
font-weight: 700;
background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 768px) {
.liste__title {
flex-direction: column;
}
.liste__title figure {
width: 100%;
aspect-ratio: unset;
margin: 7% 0;
}
.liste__title figure .liste__title__img {
position: relative;
top: unset;
right: unset;
width: 100%;
max-width: unset;
height: auto;
object-fit: contain;
}
.liste__title figure .liste__title__pattern {
right: unset;
left: 0;
}
.liste__title__content {
width: 100%;
}
.liste__items {
margin-top: 2rem;
flex-direction: column;
}
.liste__item__col {
width: 100%;
max-width: unset;
}
.liste::after {
width: 100vw;
}
}
.partenaires {
width: 100%;
gap: 2rem;
}
.partenaires h2 {
width: 300px;
font-size: var(--fontSize600);
justify-content: flex-start;
gap: 1rem;
margin-top: 0;
}
.partenaires h2 img {
width: auto;
height: 60px;
object-fit: contain;
}
.partenaires__items {
width: calc(100% - 300px - 2rem);
align-items: flex-start;
}
.partenaires__items__inner {
width: 100%;
justify-content: flex-start;
gap: 4rem;
padding: 1.5rem 0;
overflow-x: auto;
cursor: grab;
}
.partenaires__items__inner::-webkit-scrollbar {
width: 10px;
height: 2px;
}
.partenaires__items__inner::-webkit-scrollbar-thumb {
background-color: var(--blue);
border-radius: 10px;
height: 10px;
}
.partenaires__items__inner::-webkit-scrollbar-track {
background-color: rgba(0,0,0,0.05);
}
.partenaires__item {
width: 190px;
min-width: 190px;
height: 150px;
}
.partenaires__item img {
width: 100%;
height: 100%;
object-fit: contain;
}
.partenaires__bullets {
display: none;
width: 100%;
justify-content: center;
gap: 1rem;
margin-top: 3rem;
}
.partenaires__bullet {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--white);
border: 1px solid var(--blue);
cursor: pointer;
}
.partenaires__bullet.active {
background-color: var(--blue);
}
@media (max-width: 768px) {
.partenaires {
align-items: flex-start;
flex-direction: column;
gap: 0;
}
.partenaires h2 {
width: 100%;
margin-bottom: 0;
}
.partenaires h2 img {
height: 40px;
margin-left: 1rem;
transform: rotate(90deg);
}
.partenaires__items {
width: 100%;
}
.partenaires__item {
width: 130px;
min-width: 130px;
height: 100px;
}
}
.actualites {
position: relative;
z-index: 2;
width: 100vw;
background-color: var(--greenLight);
margin-top: 6.5rem;
padding: 8rem 0 12rem 0;
}
.actualites__bg {
position: absolute;
z-index: -1;
width: 20vw;
max-width: 250px;
height: auto;
object-fit: contain;
}
.actualites__bg__left {
top: -6.5rem;
right: 52.5%;
transform: translateX(-25%) rotateY(180deg);
}
.actualites__bg__right {
bottom: 2vw;
left: 5vw;
}
.actualites__inner {
position: relative;
width: 100%;
max-width: var(--maxwidth);
}
.actualites__content {
width: calc(50% - 8rem);
align-items: flex-start;
padding-right: 8rem;
}
.actualites__items {
position: relative;
width: 50%;
height: 720px;
align-items: flex-start;
padding-top: 7rem;
padding-bottom: 40px;
}
.actualites__nav {
position: absolute;
top: 0;
left: 0;
gap: 1rem;
}
.actualites__nav__prev,
.actualites__nav__next {
width: 5rem;
height: auto;
cursor: pointer;
}
.actualites__nav__prev svg,
.actualites__nav__next svg {
width: 100%;
height: auto;
}
.actualites__nav__next {
transform: rotate(180deg);
}
.actualites__nav__prev svg circle,
.actualites__nav__next svg circle {
transition: all 0.3s ease;
}
.actualites__nav__prev:hover svg circle,
.actualites__nav__next:hover svg circle {
fill: var(--green);
}
.actualites__nav__prev svg rect,
.actualites__nav__prev svg polygon,
.actualites__nav__next svg rect,
.actualites__nav__next svg polygon {
transition: all 0.3s ease;
}
.actualites__nav__prev:hover svg rect,
.actualites__nav__prev:hover svg polygon,
.actualites__nav__next:hover svg rect,
.actualites__nav__next:hover svg polygon {
fill: var(--black);
}
.actualites__items__inner {
position: absolute;
top: 7rem;
left: 0;
width: 50vw;
justify-content: flex-start;
align-items: flex-start;
gap: 40px;
overflow-x: auto;
cursor: grab;
padding-bottom: 2rem;
}
.actualites__items__inner::-webkit-scrollbar {
width: 10px;
height: 2px;
}
.actualites__items__inner::-webkit-scrollbar-thumb {
background-color: var(--green);
border-radius: 10px;
}
.actualites__items__inner::-webkit-scrollbar-track {
background-color: rgba(0,0,0,0.05);
}
.actualites__item {
position: relative;
width: 600px;
min-width: 600px;
height: auto;
background-color: var(--white);
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
transition: all 0.3s ease;
}
.actualites__item:hover {
background-color: var(--green);
}
.actualites__item figure, .blog__item figure {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 4/3;
overflow: hidden;
}
.actualites__item figure::before, .blog__item figure::before{
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 33, 41, 0.7);
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/loupe.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 40px;
opacity: 0;
transition: all 0.3s ease;
}
.actualites__item:hover figure::before, .blog__item:hover figure::before {
opacity: 1;
}
.actualites__item figure img, .blog__item figure img{
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s var(--expoInOut);
will-change: transform;
user-drag: none;
-webkit-user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.actualites__item:hover figure img, .blog__item:hover figure img{
transform: scale(1.1);
}
@media (max-width: 1460px) {
.actualites__items__inner {
gap: 20px;
}
.actualites__item {
width: 450px;
min-width: 450px;
}
}
@media (max-width: 900px) {
.actualites__item {
width: 300px;
min-width: 300px;
}
}
@media (max-width: 768px) {
.actualites__inner {
flex-direction: column;
}
.actualites__content {
width: 100%;
padding-right: 0;
}
.actualites__items {
width: 100%;
}
.actualites__nav {
left: unset;
right: 0;
}
.actualites__items__inner {
width: calc(100vw - 20px);
}
}
.blog__item__content {
width: 100%;
padding: 4.6rem;
box-sizing: border-box;
align-items: flex-start;
} 
.blog__item__header {
flex-flow: wrap;
justify-content: flex-start;
gap: 0.4rem;
}
.blog__item__date, .blog__item__cat a {
padding: 0 0.6rem;
background-color: var(--black);
color: var(--white);
font-size: 1.4rem;
font-weight: 600;
text-transform: capitalize;
}
.blog__item__cat {
gap: 0.4rem;
}
.blog__item__cat a {
background-color: var(--green);
text-decoration: none;
transition: all 0.3s ease;
}
.blog__item:hover .blog__item__cat a {
background-color: var(--white);
color: var(--black);
}
.blog__item .blog__item__cat a:hover {
background-color: var(--black);
color: var(--white);
}
.blog__item__title {
font-size: var(--fontSize500);
font-weight: 600;
}
.approches {
width: 100%;
gap: 2rem;
justify-content: flex-start;
flex-flow: wrap;
}
.approches__item__container {
position: relative;
width: calc(25% - 1.5rem);
height: auto;
aspect-ratio: 1/1;
text-decoration: none;
color: var(--white);
}
.approches__item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
overflow: hidden;
transition: all 0.3s ease;
}
.approches__item__container:hover .approches__item {
transform: translateY(2rem);
}
.approches__item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--black);
opacity: 0;
transition: all 0.3s ease;
}
.approches__item__container:hover .approches__item::before {
opacity: 1;
}
.approches__item__nbr {
position: absolute;
top: 0;
left: 0;
font-size: 14rem;
font-weight: 700;
line-height: 100%;
transform: translate(-10%, -10%);
opacity: 0.16;
}
.approches__item__title {
position: relative;
z-index: 2;
font-size: var(--fontSize600);
font-weight: 700;
text-align: center;
line-height: 120%;
}
.approches__item img {
position: absolute;
bottom: 2rem;
right: 2rem;
width: 6rem;
transform: rotate(-45deg);
transition: all 0.3s ease;
}
.approches__item__container:hover img {
transform: rotate(0);
}
@media (max-width: 1280px) {
.approches__item__container {
width: calc(33.33% - 1.5rem);
}
}
@media (max-width: 768px) {
.approches__item__container {
width: calc(50% - 1.5rem);
}
}
@media (max-width: 500px) {
.approches__item__container {
width: 100%;
aspect-ratio: 16/9;
}
}
.solutions {
width: 100%;
justify-content: flex-end;
align-items: stretch;
flex-flow: wrap;
gap: 3rem;
}
.solutions__col {
position: relative;
z-index: 2;
width: calc(50% - 1.5rem);
align-items: flex-start;
}
.solutions__col__firstwide {
width: 100%;
align-items: center;
text-align: center!important;
}
.solutions__col__firstwide .links {
justify-content: center;
}
.solutions__bg {
position: absolute;
z-index: -1;
top: 0;
right: 0;
width: 50vw;
max-width: 1000px;
height: auto;
}
.titleNbr span {
font-size: var(--fontSize800);
font-weight: 700;
color: var(--white);
background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
line-height: 100%;
margin-right: 2rem;
padding: 0 0.2rem;
}
.titleNbr h2 {
font-weight: 600;
}
.solutions__col__alt {
position: relative;
width: calc(50% - 13.5rem);
z-index: 2;
color: var(--white);
padding: 0 6rem 3rem 6rem;
justify-content: flex-start;
}
.solutions__col__alt::before {
content: "";
position: absolute;
z-index: -1;
top: 6rem;
left: 0;
width: 100%;
height: calc(100% - 6rem);
background-color: var(--blueLight);
}
.solutions__col__alt h2,
.solutions__col__alt h3,
.solutions__col__alt h4,
.solutions__col__alt h5,
.solutions__col__alt .big p {
color: var(--black);
}
.solutions__col__alt p:last-of-type {
margin-bottom: auto;
}
.solutions__col__alt .big p {
height: auto;
}
.solutions__col__alt img {
width: 12rem;
height: 12rem;
object-fit: contain;
}
@media (max-width: 768px) {
.solutions {
flex-direction: column;
}
.solutions__col {
width: 100%;
}
.solutions__col__firstwide {
width: 100%;
align-items: flex-start;
text-align: left!important;
}
.solutions__col__firstwide .links {
justify-content: flex-start;
}
.solutions__bg {
width: 100vw;
}
.solutions__col__alt {
width: calc(100% - 6rem);
padding: 0 3rem 2rem 3rem;
}
}
.metho {
position: relative;
z-index: 2;
width: 100vw;
}
.metho__bg {
position: absolute;
z-index: -1;
top: 0;
right: 0;
width: 50vw;
max-width: 800px;
height: auto;
}
.metho__inner {
position: relative;
width: 100%;
max-width: var(--maxwidth);
}
.metho p {
text-align: center;
}
.metho__timeline {
position: relative;
width: 100%;
justify-content: space-between;
padding: 30rem 0;
}
.metho__timeline::before {
content: "";
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
width: 100vw;
height: 2px;
background-color: var(--black);
transform: translate(-50%, -50%);
}
.metho__item {
position: relative;
width: 20%;
justify-content: flex-start;
align-items: flex-start;
}
.metho__item__nbr {
width: 6rem;
height: 6rem;
border-radius: 100%;
background-color: var(--green);
font-size: var(--fontSize600);
font-weight: 600;
color: var(--white);
}
.metho__item__content {
position: absolute;
top: 100%;
left: 3rem;
width: calc(100% + 2rem);
padding-left: 2rem;
padding-top: 4rem;
}
.metho__item__content p {
text-align: left;
}
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content {
padding-top: 0;
padding-bottom: 4rem;
}
.metho__item__content::before {
content: "";
position: absolute;
bottom: 2rem;
left: 0;
width: 2px;
height: calc(100% - 2rem);
background-color: var(--green);
}
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content::before {
bottom: unset;
top: 2rem;
}
.metho__item__content::after {
content: "";
position: absolute;
bottom: 1rem;
left: -0.4rem;
width: 1rem;
height: 1rem;
background-color: var(--black);
border-radius: 100%;
}
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content::after {
bottom: unset;
top: 1rem;
}
.metho__item__content p:first-child {
margin-top: 0;
}
.metho__item__content p:last-child {
margin-bottom: 0;
}
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content {
top: unset;
bottom: 100%;
}
.metho__item__content figure {
position: absolute;
bottom: 2rem;
right: calc(100% + 2rem);
width: 6rem;
height: 6rem;
}
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content figure {
bottom: unset;
top: 2rem;
}
.metho__item__content figure img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 1380px) {
.metho__item__content {
width: calc(100% - 2rem);
}
}
@media (max-width: 1080px) {
.metho__timeline {
flex-direction: column;
gap: 10rem;
padding: 0;
margin: 4rem 0 25rem 0;
}
.metho__timeline::before {
width: 2px;
height: 100%;
}
.metho__item {
width: 100%;
justify-content: center;
}
.metho__item__content,
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content {
bottom: unset;
top: 3rem;
left: calc(50% + 3rem);
width: calc(50% - 15rem);
padding: 2rem 4rem 0 8rem;
}
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content {
left: unset;
right: calc(50% + 3rem);
}
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content::before,
.metho__item__content::before {
width: 100%;
height: 2px;
top: 0;
bottom: unset;
}
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content::after,
.metho__item__content::after {
width: 1rem;
height: 1rem;
top: -0.4rem;
bottom: unset;
right: -0.4rem;
left: unset;
}
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content::after {
right: unset;
left: -0.4rem;
}
.metho__item__content figure,
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content figure {
bottom: unset;
top: 2rem;
right: unset;
left: 0;
}
}
@media (max-width: 600px) {
.metho__timeline {
gap: 4rem;
margin-bottom: 4rem;
}
.metho__item {
justify-content: flex-start;
align-items: flex-start;
gap: 2rem;
}
.metho__timeline::before {
left: 3rem;
}
.metho__item__content,
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content {
position: initial;
padding: 0;
width: calc(100% - 8rem);
}
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content::before,
.metho__item__content::before {
display: none;
}
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content::after,
.metho__item__content::after {
display: none;
}
.metho__item__content figure,
.metho__timeline .metho__item:nth-child(2n + 1) .metho__item__content figure {
position: initial;
}
}
.pourquoi {
position: relative;
z-index: 2;
width: 100vw;
padding-bottom: 12rem;
margin-bottom: 8rem;
}
.pourquoi::before {
content: "";
position: absolute;
top: 12rem;
left: 0;
width: 100%;
height: calc(100% - 12rem);
background-color: var(--blueLight);
}
.pourquoi__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--maxwidth);
gap: 8rem;
align-items: flex-end;
}
.pourquoi__inner::before {
content: "";
position: absolute;
z-index: -1;
bottom: -20rem;
right: 0;
width: 18%;
height: auto;
aspect-ratio: 1/1;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/guillemets.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.pourquoi__inner::after {
content: "";
position: absolute;
z-index: -1;
top: 15rem;
right: 100%;
width: auto;
height: calc(100% - 8rem);
aspect-ratio: 120/600;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/pattern_oz_2_blanc.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transform: translateX(20%);
}
.pourquoi__list {
position: relative;
z-index: 2;
width: 50%;
padding: 2rem 4rem 6rem 4rem;
background-color: var(--blue);
align-items: flex-start;
box-sizing: border-box;
color: var(--white);
}
.pourquoi__list .titleNbr{
margin-bottom: 2rem;
}
.pourquoi__list .titleNbr h2 {
color: var(--black);
}
.pourquoi__list ul {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 2rem;
width: 100%;
margin: 0;
padding: 0 0 0 5rem;
list-style: none;
color: var(--white);
}
.pourquoi__list ul li {
position: relative;
}
.pourquoi__list ul li,
.pourquoi__list ul p,
.pourquoi__list ul a {
font-size: 1.6rem;
}
.pourquoi__list ul li::before {
content: "";
position: absolute;
top: 0;
left: -5rem;
width: 3rem;
height: 3rem;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/puce_noir.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.pourquoi__slider {
position: relative;
width: calc(50% - 8rem);
padding: 0 0 5rem 0;
margin-top: 16rem;
}
.pourquoi__slider__items {
width: 100%;
gap: 4rem;
overflow: hidden;
cursor: grab;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pourquoi__slider__item {
display: none;
width: 100%;
align-items: flex-start;
}
.pourquoi__slider__item.active {
display: flex;
}
.pourquoi__slider__item__img {
width: 100%;
justify-content: flex-start;
margin-top: 2rem;
}
.pourquoi__slider__item__img img {
width: 100px;
height: 100px;
border-radius: 100%;
margin-right: 2rem;
object-fit: cover;
}
.pourquoi__slider__item__naming {
align-items: flex-start;
color: var(--blue);
gap: 0.4rem;
}
.pourquoi__nav {
position: absolute;
top: 0;
right: 0;
gap: 1rem;
}
.pourquoi__nav__prev, 
.pourquoi__nav__next {
width: 5rem;
height: 5rem;
cursor: pointer;
}
.pourquoi__nav__prev svg,
.pourquoi__nav__next svg {
width: 100%;
height: auto;
}
.pourquoi__nav__next svg {
transform: rotate(180deg);
}
.pourquoi__nav__prev svg circle,
.pourquoi__nav__next svg circle {
transition: all 0.3s ease;
}
.pourquoi__nav__prev:hover svg circle,
.pourquoi__nav__next:hover svg circle {
fill: var(--blue);
}
.pourquoi__nav__prev svg rect,
.pourquoi__nav__prev svg polygon,
.pourquoi__nav__next svg rect,
.pourquoi__nav__next svg polygon {
transition: all 0.3s ease;
}
.pourquoi__nav__prev:hover svg rect,
.pourquoi__nav__prev:hover svg polygon,
.pourquoi__nav__next:hover svg rect,
.pourquoi__nav__next:hover svg polygon {
fill: var(--black);
}
@media (max-width: 768px) {
.pourquoi {
padding-bottom: 6rem;
}
.pourquoi__inner {
flex-direction: column;
align-items: center;
gap: 2rem;
}
.pourquoi__inner::before {
bottom: 0rem;
transform: translateY(100%);
}
.pourquoi__list {
width: 100%;
max-width: 500px;
}
.pourquoi__slider {
width: 100%;
max-width: 500px;
padding: 6rem 0;
margin-top: 2rem;
}
.pourquoi__slider__item__img {
margin-top: 0;
}
}
.ressources {
position: relative;
z-index: 2;
width: 100%;
}
.ressources p {
text-align: center;
}
.ressources__cols {
position: relative;
z-index: 2;
width: 100%;
align-items: stretch;
flex-flow: wrap;
gap: 2rem;
padding: 4rem 0 6rem 0;
}
.ressources__cols::before {
content: "";
position: absolute;
z-index: -2;
top: 50%;
left: 50%;
width: 100vw;
height: 50%;
background-color: var(--greenLight);
transform: translateX(-50%);
}
.ressources__cols::after {
content: "";
position: absolute;
z-index: -1;
top: calc(50% - 5.9rem);
right: calc(100% + 6rem);
width: 23rem;
height: 23rem;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/bg_blog_OZ_vert_Z.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
}
.ressources__col {
width: calc(25% - 1.5rem);
box-sizing: border-box;
justify-content: flex-start;
padding: 4rem 2rem;
color: var(--white);
background-color: var(--green);
}
.ressources__col img {
width: 5rem;
height: 5rem;
margin-bottom: 1rem;
object-fit: contain;
}
.ressources__col p {
margin-bottom: 1.8rem;
}
.ressources__col .big p {
margin: 0;
line-height: 160%;
font-size: 1.8rem;
}
.ressources__col p,
.ressources__col ul li,
.ressources__col a {
color: var(--white);
}
.ressources__col .btn {
margin-top: auto;
}
@media (max-width: 1080px) {
.ressources__col {
width: calc(50% - 1rem);
}
}
@media (max-width: 500px) {
.ressources__col {
width: 100%;
}
}
.actus {
position: relative;
z-index: 2;
width: 100vw;
background-color: var(--greenLight);
}
.actus__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--maxwidth);
padding: 8rem 0 4rem 0;
margin: 4rem 0 12rem 0;
}
.actus__inner::after {
content: "";
position: absolute;
z-index: -1;
top: 50%;
left: calc(100% + 8rem);
width: 23rem;
height: 23rem;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/bg_blog_OZ_vert_O.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
}
.actus__nav {
position: absolute;
top: 0;
left: calc(50% + 1rem);
gap: 1rem;
}
.actus__nav__prev, 
.actus__nav__next {
width: 5rem;
height: 5rem;
cursor: pointer;
}
.actus__nav__prev svg,
.actus__nav__next svg {
width: 100%;
height: auto;
}
.actus__nav__next svg {
transform: rotate(180deg);
}
.actus__nav__prev svg circle,
.actus__nav__next svg circle {
transition: all 0.3s ease;
}
.actus__nav__prev:hover svg circle,
.actus__nav__next:hover svg circle {
fill: var(--green);
}
.actus__nav__prev svg rect,
.actus__nav__prev svg polygon,
.actus__nav__next svg rect,
.actus__nav__next svg polygon {
transition: all 0.3s ease;
}
.actus__nav__prev:hover svg rect,
.actus__nav__prev:hover svg polygon,
.actus__nav__next:hover svg rect,
.actus__nav__next:hover svg polygon {
fill: var(--black);
}
.actus__items {
width: 100%;
}
.actus__item {
display: none;
width: 100%;
gap: 2rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.actus__item.active {
display: flex;
}
.actus__item__content {
width: calc(50% - 1rem);
align-items: flex-start;
box-sizing: border-box;
padding-right: 5rem;
}
.actus__item .blog__item__title {
margin: 2rem 0 2rem 0;
}
.actus__item figure {
width: calc(50% - 1rem);
}
.actus__item figure img {
width: 100%;
height: auto;
object-fit: contain;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
.actus__item .btn {
margin-top: 2rem;
}
.actus__bullets {
position: absolute;
bottom: 0;
left: calc(50% + 1rem);
justify-content: center;
gap: 1rem;
margin-top: 1rem;
}
.actus__bullet {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--black);
cursor: pointer;
}
.actus__bullet.active {
background-color: var(--green);
}
@media (max-width: 768px) {
.actus__inner {
flex-direction: column;
align-items: center;
gap: 2rem;
max-width: 500px;
}
.actus__nav {
left: 0;
}
.actus__items {
width: 100%;
}
.actus__item {
width: 100%;
flex-direction: column;
gap: 2rem;
}
.actus__item__content {
width: 100%;
padding-right: 0;
}
.actus__item figure {
width: 100%;
}
.actus__bullets {
left: unset;
right: 0;
}
}
@media (max-width: 540px) {
.actus__inner {
max-width: var(--maxwidth);
}
}
.expertises {
position: relative;
z-index: 2;
width: 100vw;
padding-bottom: 12rem;
margin-bottom: 8rem;
}
.expertises__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--maxwidth);
gap: 8rem;
}
.expertises__nav {
justify-content: center;
max-width: 900px;
}
.expertises__nav a {
text-align: center;
}
.expertises__inner::before {
content: "";
position: absolute;
z-index: 3;
bottom: -20rem;
right: 2.5rem;
width: 13%;
height: auto;
aspect-ratio: 1/1;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/bg_O_bleu.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.expertises__inner::after {
content: "";
position: absolute;
z-index: -1;
top: -10rem;
right: calc(100% + 11rem);
width: 30%;
height: auto;
aspect-ratio: 1/1;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/bg_Z_gris.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transform: translateX(20%);
}
.expertises__onglets {
}
.expertises__onglet {
position: relative;
display: none;
align-items: flex-start;
}
.expertises__onglet.active {
display: flex;
}
.expertises__list {
position: relative;
z-index: 2; width: 60%;
padding: 4rem 6rem 6rem 6rem;
background-color: var(--blue);
align-items: flex-start;
box-sizing: border-box;
color: var(--white);
max-height: 74rem;
overflow-y: auto;
}
.expertises__list::-webkit-scrollbar {
width: 10px;
}
.expertises__list::-webkit-scrollbar-thumb {
background-color: var(--blueDark);
border-radius: 10px;
}
.expertises__list::-webkit-scrollbar-track {
background-color: rgba(0,0,0,0.05);
}
.expertises__list__picto {
position: absolute;
z-index: 3;
top: -8rem; left: 30%;
width: 12rem;
height: 12rem;
transform: translateX(-50%);
}
.expertises__list__picto img {
width: 100%;
height: 100%;
object-fit: contain;
}
.expertises__list h3 {
margin-bottom: 3rem;
}
.expertises__list .big {
margin-top: 2rem;
}
.expertises__list p {
color: var(--white);
}
.expertises__list .titleNbr{
margin-bottom: 2rem;
}
.expertises__list .titleNbr h2 {
color: var(--black);
}
.expertises__list ul {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 2rem;
width: 100%;
margin: 0;
padding: 0 0 0 4rem;
list-style: none;
color: var(--white);
}
.expertises__list ul li {
position: relative;
}
.expertises__list ul li,
.expertises__list ul p,
.expertises__list ul a {
font-size: var(--fontSize400);
}
.expertises__list ul li::before {
content: "";
position: absolute;
top: 0;
left: -4rem;
width: 3rem;
height: 3rem;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/puce_noir.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.expertises__list .links {
margin-bottom: 0;
}
.expertises__content {
position: relative;
z-index: 1; width: 40%;
padding: 4rem 6rem 6rem 6rem;
background-color: var(--grey);
align-items: flex-start;
box-sizing: border-box;
color: var(--white);
transform: translateY(8rem);
align-self: flex-end;
}
.expertises__content::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
width: calc(100% + 20rem);
height: 100%;
background-color: var(--grey);
}
.expertises__content ul {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
width: 100%;
gap: 1rem;
margin: 0px;
padding: 0px 0px 0px 2rem;
}
.expertises__content .links {
margin-bottom: 0;
}
.expertises__onglet--plus .tabs {
display: flex;
border-bottom: 1px solid #ccc;
}
.expertises__onglet--plus .tab {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 1.6rem 40px 1.6rem 0;
cursor: pointer;
border: unset;
border-bottom: 1px solid var(--black);
background: transparent;
font-family: var(--font1);
font-size: var(--fontSize400);
font-weight: 500;
text-align: left;
color: var(--white);
}
.expertises__onglet--plus .tab::before {
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 20px;
height: 3px;
background: var(--black);
transform: translateY(-50%);
}
.expertises__onglet--plus .tab::after {
content: "";
position: absolute;
top: 50%;
right: 18px;
width: 3px;
height: 20px;
background: var(--black);
transform: translateY(-50%);
transition: all 0.5s var(--expoInOut);
}
.expertises__onglet--plus .tab.active::after {
transform: translateY(-50%) rotate(90deg);
}
.expertises__onglet--plus .tab-content { overflow: hidden;
height: 0;
}
.expertises__onglet--plus .tab-content p {
color: var(--black);
}
.expertises__onglet--plus .tab-content.active {
display: block;
}
@media (max-width: 1080px) {
.expertises__list {
padding: 4rem 6rem 6rem 6rem;
}
.expertises__content {
padding: 4rem 6rem;
}
}
@media (max-width: 768px) {
.expertises {
margin-bottom: 0;
padding-bottom: 0;
}
.expertises__inner::before {
display: none;
}
.expertises__nav {
gap: 1rem;
}
.expertises__onglet {
flex-direction: column;
}
.expertises__list {
position: relative;
width: 100%;
padding: 4rem 0 6rem 0;
overflow: visible;
max-height: unset;
}
.expertises__list::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
background-color: var(--blue);
transform: translateX(-50%);
}
.expertises__content {
width: 100%;
padding: 4rem 0 6rem 0;
transform: unset;
}
.expertises__content::before {
right: unset;
left: 50%;
width: 100vw;
transform: translateX(-50%);
}
}
.offre {
position: relative;
z-index: 2;
width: 100vw;
background: linear-gradient(90deg, transparent 50%, var(--greenLight) 100%);
}
.offre__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--maxwidth);
align-items: stretch;
gap: 4rem;
}
.offre__inner::before {
content: "";
position: absolute;
top: 0;
right: calc(100% + 10rem);
width: auto;
height: calc(100% + 10rem);
aspect-ratio: 142/767;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/pattern_oz_vert_clair.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.offre__content {
position: relative;
z-index: 2;
width: calc(40% - 4rem);
justify-content: center;
align-items: flex-start;
}
.offre__content ul {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 2rem;
width: 100%;
margin: 4rem 0;
padding: 0 0 0 5rem;
list-style: none;
}
.offre__content ul li {
position: relative;
}
.offre__content ul li,
.offre__content ul p,
.offre__content ul a {
font-size: 1.6rem;
}
.offre__content ul li::before {
content: "";
position: absolute;
top: 0;
left: -5rem;
width: 3rem;
height: 3rem;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/puce_vert.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.offre__content h2 {
margin-top: 0rem;
margin-bottom: 2rem;
}
.offre__content h2 del {
position: relative;
z-index: -1;
display: inline-block;
background-color: var(--green);
text-decoration: none;
}
.offre__schema {
position: relative;
z-index: 2;
width: 60%;
height: auto;
}
.offre__schema__inner {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: auto;
aspect-ratio: 1/1;
transform: translateY(-50%);
}
.offre__schema__center {
position: absolute;
top: 50%;
left: 50%;
width: 220px;
height: 220px;
transform: translate(-50%, -50%);
}
.offre__schema__center::before {
content: "";
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
width: 360px;
height: 360px;
border-radius: 100%;
border: 3px dotted var(--black);
transform: translate(-50%, -50%);
}
.offre__schema__center img {
width: 100%;
height: 100%;
object-fit: contain;
}
.offre__schema__center div {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
width: 140px;
height: 140px;
color: var(--white);
font-weight: 600;
color: var(--white);
text-align: center;
transform: translate(-50%, -50%);
}
.offre__schema__item {
position: absolute;
top: 50%;
left: 50%;
width: 90px;
height: 90px;
transform: translate(-50%, -50%);
}
.offre__schema__item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
transition: all 0.3s;
}
.offre__schema__item img.off {
opacity: 0;
z-index: 2;
}
.offre__schema__item:hover img.off {
opacity: 1;
}
.offre__schema__item__text {
position: absolute;
top: 0;
left: calc(100% + 10px);
width: 150px;
height: 100%;
font-weight: 600;
color: var(--green);
transition: all 0.3s;
}
.offre__schema__item:hover .offre__schema__item__text {
color: var(--black);
}
.offre__schema__item.item--1 {
transform: translate(-50%, -50%) translate(-130px, -130px);
}
.offre__schema__item.item--2 {
transform: translate(-50%, -50%) translate(130px, -130px);
}
.offre__schema__item.item--3 {
transform: translate(-50%, -50%) translate(170px, 60px);
}
.offre__schema__item.item--4 {
transform: translate(-50%, -50%) translate(0px, 180px);
}
.offre__schema__item.item--5 {
transform: translate(-50%, -50%) translate(-170px, 60px);
}
.offre__schema__item.item--1 .offre__schema__item__text,
.offre__schema__item.item--5 .offre__schema__item__text {
left: unset;
right: calc(100% + 10px);
text-align: right;
}
.offre__schema__item.item--4 .offre__schema__item__text {
left: 0%;
top: calc(100% + 10px);
height: auto;
}
@media (max-width: 1280px) {
.offre__inner {
flex-direction: column;
}
.offre__content {
width: 100%;
}
.offre__schema {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
}
.offre__schema__inner {
display: flex;
justify-content: center;
align-items: flex-start;
flex-flow: wrap;
gap: 4rem;
position: relative;
top: unset;
left: unset;
width: 100%;
max-width: 400px;
aspect-ratio: unset;
transform: translateY(-60px);
}
.offre__schema__center {
position: relative;
top: unset;
left: unset;
transform: unset;
width: 100%;
margin-top: 10rem;
}
.offre__schema__center::before {
width: 280px;
height: 280px;
}
.offre__schema__item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
top: unset!important;
left: unset!important;
bottom: unset!important;
right: unset!important;
transform: unset!important;
width: calc(50% - 2rem);
height: auto;
gap: 1rem;
}
.offre__schema__item__text {
position: relative;
top: unset!important;
left: unset!important;
right: unset!important;
bottom: unset!important;
width: auto;
height: auto;
transform: unset!important;
text-align: center!important;
}
.offre__schema__item img {
position: relative;
top: unset;
left: unset;
width: 90px;
height: 90px;
}
.offre__schema__item img.off {
display: none;
}
}
@media (max-width: 350px) {
.offre__schema__inner {
gap: 1.5rem;
}
.offre__schema__item {
width: calc(50% - 0.75rem);
}
}
.chiffres {
width: 100%;
gap: 6rem;
flex-flow: wrap;
}
.chiffres__item {
width: calc(25% - 4.50rem);
height: auto;
aspect-ratio: 1/1;
color: var(--white);
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/bg_chiffre_cle_bleu.svg), url(//www.ozerim.fr/wp-content/themes/wp-content/themes/ozerim/assets/chart/bg_chiffre_cle_bleu.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
text-align: center;
box-sizing: border-box;
padding: 0 3rem;
}
.chiffres__item:nth-child(2n) {
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/bg_chiffre_cle_vert.svg), url(//www.ozerim.fr/wp-content/themes/wp-content/themes/ozerim/assets/chart/bg_chiffre_cle_vert.svg);;
}
.chiffres__item img {
max-width: 8rem;
max-height: 8rem;
object-fit: contain;
margin-bottom: 1rem;
}
.chiffres__item__big {
font-size: var(--fontSize500);
font-weight: 600;
}
@media (max-width: 1160px) {
.chiffres {
gap: 4rem;
max-width: 500px;
}
.chiffres__item {
width: calc(50% - 3rem);
}
}
@media (max-width: 500px) {
.chiffres {
gap: 2rem;
}
.chiffres__item {
width: calc(50% - 1.5rem);
}
}
@media (max-width: 400px) {
.chiffres {
max-width: 200px;
}
.chiffres__item {
width: 100%;
}
}
.dates {
position: relative;
z-index: 2;
width: 100vw;
}
.dates__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--maxwidth);
}
.dates__inner::before {
content: "";
position: absolute;
z-index: 3;
bottom: 0;
left: calc(100% + 10rem);
width: auto;
height: calc(100% - 18.5rem);
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/pattern_oz_2_blanc.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
aspect-ratio: 120/600;
}
.dates__nav {
position: relative;
z-index: 3;
align-items: flex-end;
margin-bottom: 6rem;
gap: 4rem;
}
.dates__nav a {
text-decoration: none;
}
.dates__nav__date {
font-size: var(--fontSize700);
font-weight: 700;
color: var(--green);
transition: all 0.3s;
}
.dates__nav__date em {
font-size: var(--fontSize400);
font-weight: 700;
}
.dates__nav__separator {
position: relative;
width: 2px;
height: 10rem;
background-color: var(--green);
transition: all 0.3s;
}
.dates__nav__separator::before {
content: "";
position: absolute;
top: 0;
left: -3.5px;
width: 9px;
height: 9px;
background-color: var(--black);
border-radius: 100%;
}
.dates__nav__nbr {
width: 6rem;
height: 6rem;
font-size: var(--fontSize600);
font-weight: 600;
color: var(--white);
border-radius: 100%;
background-color: var(--green);
transition: all 0.3s;
}
.dates__nav a.active .dates__nav__date {
color: var(--black);
}
.dates__nav a.active .dates__nav__separator {
height: 5rem;
}
.dates__nav a.active .dates__nav__nbr {
background-color: var(--black);
}
.dates__onglets {
position: relative;
z-index: 2;
width: 100%;
padding: 4rem 0 8rem 0;
}
.dates__onglets.solo {
padding-top: 0;
}
.dates__onglets::before {
content: "";
position: absolute;
z-index: -1;
bottom: 100%;
left: 50%;
width: 100vw;
height: calc(9rem - 1px);
background-color: var(--greenLight);
border-top: 2px solid var(--green);
transform: translateX(-50%);
}
.dates.solo .dates__onglets::before {
border-top: unset;
}
.dates__onglets::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
background-color: var(--greenLight);
transform: translateX(-50%);
}
.dates__onglet {
display: none;
width: 100%;
gap: 8rem;
}
.dates__onglet.active {
display: flex;
}
.dates__content {
width: calc(50% - 8rem);
}
.dates__image {
width: 50%;
}
@media (max-width: 1280px) {
.dates__nav {
flex-flow: wrap;
}
.dates__nav__separator {
display: none;
}
}
@media (max-width: 768px) {
.dates__onglets::after {
border-top: 2px solid var(--green);
}
.dates__onglets::before {
display: none;
}
.dates__onglets.solo {
padding-top: 4rem;
}
.dates__nav__date {
font-size: var(--fontSize600);
}
.dates__nav__nbr {
width: 5rem;
height: 5rem;
font-size: var(--fontSize500);
}
.dates__onglet {
flex-direction: column;
gap: 2rem;
max-width: 600px;
}
.dates__content {
width: 100%;
}
.dates__image {
width: 100%;
}
}
.equipe {
position: relative;
z-index: 2;
width: 100vw;
}
.equipe::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
width: 50vw;
height: auto;
aspect-ratio: 1/1;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/bg_O_gris.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transform: translateX(50%)
}
.equipe__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--maxwidth);
justify-content: flex-start;
align-items: stretch;
flex-flow: wrap;
gap: 3rem 1rem;
}
.equipe__item {
width: calc(25% - 0.75rem);
height: auto;
justify-content: flex-start;
text-align: center;
background-color: transparent;
transition: all 0.3s;
cursor: pointer;
}
.equipe__item:hover {
background-color: var(--black);
}
.equipe__image {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 1/1;
overflow: hidden;
}
.equipe__image::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
opacity: 0.6;
transition: all 0.3s;
}
.equipe__item:hover .equipe__image::after {
opacity: 0;
}
.equipe__image img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
will-change: transform;
transition: all 0.5s;
}
.equipe__item:hover .equipe__image img {
transform: scale(1.1);
}
.equipe__item__content {
width: 100%;
margin-bottom: 1rem;
}
.equipe__name {
width: auto;
max-width: calc(100% - 20px);
font-size: var(--fontSize400);
font-weight: 700;
margin: 2rem 0 0.5rem 0;
}
.equipe__function {
width: auto;
max-width: calc(100% - 20px);
font-size: var(--fontSize400);
font-weight: 600;
margin-bottom: 1rem;
}
.equipe__item:hover .equipe__name,
.equipe__item:hover .equipe__function {
color: var(--white);
background: unset;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
}
.equipe__linkedin {
width: 4.4rem;
height: 4.4rem;
background-color: var(--black);
border-radius: 100%;
margin-bottom: 2rem;
transition: all 0.3s;
}
.equipe__linkedin:hover {
background-color: var(--green);
}
.equipe__linkedin img {
width: 20px;
height: auto;
}
.equipe__popup__content {
display: none;
}
.equipe__popup {
display: none;
position: fixed;
z-index: 999;
top: 50%;
left: 50%;
width: 90%;
max-width: 1120px;
max-height: 80vh;
background-color: var(--white);
transform: translate(-50%, -50%);
overflow: auto;
box-shadow: 0 9px 20px rgba(89, 208, 201, 0.7);
}
.equipe__popup.active {
display: block;
}
.equipe__popup__close {
position: absolute;
top: 2rem;
right: 2rem;
width: 5rem;
height: 5rem;
cursor: pointer;
}
.equipe__popup__close::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 2.5rem;
background-color: var(--black);
transform: translate(-50%, -50%) rotate(45deg);
}
.equipe__popup__close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 2.5rem;
background-color: var(--black);
transform: translate(-50%, -50%) rotate(-45deg);
}
.equipe__popup__inner {
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
padding: 8rem 7rem;
box-sizing: border-box;
}
.equipe__popup .equipe__image {
position: relative;
top: unset;
left: unset;
width: 35%;
}
.equipe__popup .equipe__image::after {
display: none;
}
.equipe__popup .equipe__item__content {
width: 50%;
align-items: flex-start;
}
.equipe__popup .equipe__popup__content {
width: 100%;
display: block;
}
.equipe__popup .equipe__function.text__gradient {
color: var(--black);
background: unset;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
}
.equipe__popup .equipe__linkedin {
order: 10;
margin-top: 2rem;
}
@media (max-width: 768px) {
.equipe__item {
width: calc(33.33% - 0.67rem);
}
.equipe__linkedin {
width: 3.5rem;
height: 3.5rem;
}
.equipe__linkedin img {
width: 15px;
}
.equipe__popup {
width: 95%;
}
.equipe__popup__inner {
padding: 8rem 4rem 2rem 4rem;
flex-direction: column;
align-items: flex-start;
}
.equipe__popup__close {
top: 1.5rem;
}
.equipe__popup .equipe__image {
position: relative;
top: unset;
left: unset;
transform: unset;
width: 100%;
max-width: 300px;
}
.equipe__popup .equipe__popup__content,
.equipe__popup .equipe__item__content {
width: 100%;
}
}
@media (max-width: 600px) {
.equipe__item {
width: calc(50% - 0.5rem);
}
}
.bandeau {
position: relative;
z-index: 2;
width: 100vw;
background-color: var(--green);
}
.bandeau__bg {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bandeau__bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bandeau__bg::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #001f27;
opacity: 0.8;
}
.bandeau__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--maxwidth);
padding: 5rem 0;
gap: 4rem;
}
.bandeau__inner::before {
content: "";
position: absolute;
top: 0;
right: calc(100% + 10rem);
width: auto;
height: 100%;
aspect-ratio: 300/767;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/pattern_oz_1_degrade.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bandeau__text {
width: auto;
max-width: calc(100% - 30rem);
align-items: flex-start;
color: var(--white);
}
.bandeau__inner h2 {
width: auto;
}
.bandeau__text p {
color: var(--white);
}
.bandeau__link {
position: relative;
z-index: 2;
width: 13rem;
height: auto;
padding: 3rem;
aspect-ratio: 1/1;
font-size: var(--fontSize500);
font-weight: 600;
color: var(--white);
text-align: center;
text-decoration: none;
}
.bandeau__link__off {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/bg_btn_cv_off.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transition: all 0.3s;
}
.bandeau__link__hover {
position: absolute;
z-index: -2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/bg_btn_cv_hover.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.bandeau__link:hover .bandeau__link__off {
opacity: 0;
}
@media (max-width: 768px) {
.bandeau__inner {
flex-direction: column;
align-items: center;
gap: 2rem;
}
.bandeau__text {
align-items: center;
max-width: unset;
}
.bandeau__inner h2,
.bandeau__text p {
text-align: center;
}
}
.agences {
width: 100%;
gap: 6rem;
}
.agences__title, .agences__item {
width: calc(33.33% - 4rem);
height: auto;
aspect-ratio: 1/1;
box-sizing: border-box;
padding: 4rem;
align-items: flex-start;
}
.agences__item {
background-color: var(--blueDark);
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/pattern_agences.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
justify-content: flex-end;
gap: 0;
}
.agences__item h3 {
font-weight: 600;
color: var(--white);
margin: 0;
}
.agences__item p {
font-weight: 600;
color: var(--white);
}
.agences__item .btn {
width: 100%;
margin-top: 2rem;
}
@media (max-width: 1060px) {
.agences {
justify-content: flex-start;
align-items: stretch;
flex-flow: wrap;
gap: 2rem;
max-width: 768px;
}
.agences__title {
width: 100%;
aspect-ratio: unset;
padding: 0;
}
.agences__item {
width: calc(50% - 1rem);
}
}
@media (max-width: 550px) {
.agences__item {
width: 100%;
aspect-ratio: unset;
gap: 2rem;
}
.agences__item .btn {
width: auto;
align-self: flex-end;
}
}
.trouver {
width: 100%;
justify-content: flex-start;
align-items: stretch;
gap: 4rem;
}
.trouver__item {
width: calc(50% - 2rem);
height: auto;
justify-content: space-between;
align-items: flex-start;
}
.trouver__name {
font-size: var(--fontSize500);
font-weight: 600;
color: var(--blue);
margin: 0;
}
.trouver__address {
width: 100%;
gap: 1rem;
margin: 2rem 0;
}
.trouver__map {
width: 100%;
}
@media (max-width: 768px) {
.trouver {
flex-flow: wrap;
max-width: 500px;
}
.trouver__item {
width: 100%;
}
}
.contactForm {
position: relative;
z-index: 2;
width: 100%;
margin-top: 1.6rem;
}
.contactForm__inner {
width: 100%;
max-width: 757px;
gap: 20px;
flex-flow: wrap;
}
.contactForm__inner h2 {
color: var(--blue);
text-align: center;
}
.contactForm__inner span.wpcf7-form-control-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: calc(50% - 10px);
}
.contactForm__inner span.wpcf7-form-control-wrap[data-name="message"] {
width: 100%;
}
.contactForm__inner span.wpcf7-form-control-wrap input,
.contactForm__inner span.wpcf7-form-control-wrap textarea,
.contactForm__inner span.wpcf7-form-control-wrap select {
width: calc(100% - 40px);
background-color: var(--white);
padding: 1.4rem 2rem;
border: unset;
border: 2px solid var(--blue);
font-family: var(--font1);
font-size: var(--fontSize400);
color: var(--black);
border-radius: 30px;
}
.contactForm__inner span.wpcf7-form-control-wrap select {
width: 100%;
appearance: none;
}
.contactForm__inner span.wpcf7-form-control-wrap[data-name="typesociete"] {
position: relative;
}
.contactForm__inner span.wpcf7-form-control-wrap[data-name="typesociete"]::before {
content: "";
position: absolute;
top: 50%;
right: 20px;
width: 20px;
height: 20px;
background-image: url(//www.ozerim.fr/wp-content/themes/ozerim/assets/chart/arrow-select.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transform: translateY(-50%);
}
.contactForm__inner span.wpcf7-form-control-wrap textarea {
resize: vertical;
}
.contactForm__inner span.wpcf7-form-control-wrap input::placeholder,
.contactForm__inner span.wpcf7-form-control-wrap textarea::placeholder {
color: var(--black);
}
.contactForm__full {
width: 100%;
gap: 20px;
}
.contactForm__last,
.contactForm__captcha,
.kc_captcha .wpcf7-form-control {
width: 100%;
}
.kc_captcha .captcha-image {
width: calc(100% - 20px);
border: unset;
background-color: var(--grey);
border-radius: 35px;
color: var(--black);
font-family: var(--font1);
font-size: 16px;
}
.contactForm__full span.wpcf7-form-control-wrap {
width: 100%;
}
.contactForm__inner input[type="submit"]{
appearance: none;
padding: 1.2rem 2.6rem;
align-self: flex-start;
}
.contactForm__inner input[type="submit"]:disabled {
opacity: .3;
}
.contactForm__inner span.wpcf7-form-control-wrap input[type="checkbox"] {
position: relative;
width: 20px;
height: 20px;
appearance: none;
padding: 10px;
border-radius: 0;
margin: 0;
margin-right: 10px;
background-color: var(--white);
border: 2px solid var(--black);
border-radius: 3px;
}
.contactForm__inner span.wpcf7-form-control-wrap input[type="checkbox"]:checked::before,
.contactForm__inner span.wpcf7-form-control-wrap input[type="checkbox"]:checked:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 3px;
border-radius: 100px;
background-color: var(--blue);
transform: translate(-10px, 0px) rotate(45deg);
}
.contactForm__inner span.wpcf7-form-control-wrap input[type="checkbox"]:checked:after {
width: 15px;
transform: translate(-3px, -2.5px) rotate(-45deg);
}
.contactForm__inner span.wpcf7-form-control-wrap label {
display: flex;
}
.contactForm__inner span.wpcf7-form-control-wrap span.wpcf7-list-item-label {
display: block;
font-size: 14px;
font-weight: 400;
color: var(--black);
}
.contactForm .wpcf7-not-valid-tip {
font-size: var(--fontSize300);
margin-top: 4px;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450;
background-color: #46b450;
color: var(--white);
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232;
background-color: #dc3232;
color: var(--white);
}
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; 
background-color: #f56e28;
color: var(--white);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900;
background-color: #ffb900;
color: var(--white);
}
.wpcf7 form .wpcf7-response-output {
margin: 0;
padding: 10px 20px;
}
.wpcf7-list-item {
margin: 0;
}
@media (max-width: 800px) {
.contactForm__inner {
gap: 20px;
}
.contactForm__inner span.wpcf7-form-control-wrap {
width: calc(50% - 10px);
}
.contactForm__full span.wpcf7-form-control-wrap {
width: 100%;
}
.contactForm__inner span.wpcf7-form-control-wrap[data-name="captcha-170"],
.contactForm__inner span.wpcf7-form-control-wrap[data-name="message"],
.contactForm__inner span.wpcf7-form-control-wrap[data-name="rgpd"] {
width: 100%
}
}
@media (max-width: 450px) {
.contactForm__inner {
gap: 10px;
}
.contactForm__inner span.wpcf7-form-control-wrap {
width: 100%;
}
.contactForm__inner span.wpcf7-form-control-wrap input, 
.contactForm__inner span.wpcf7-form-control-wrap textarea, 
.contactForm__inner span.wpcf7-form-control-wrap select {
border-radius: 22px;
}
}
.listeCategories {
width: 100%;
margin: 2rem 0 4rem 0;
align-items: flex-start;
flex-flow: wrap;
gap: 1rem;
}
.listeCategories .btn {
background-color: var(--white);
color: var(--blue);
border-color: var(--green)
}
.listeCategories .btn:hover, .listeCategories .btn.active {
background-color: var(--green);
color: var(--white);
}
.blog {
position: relative;
width: 100%;
gap: 6rem 1rem;
justify-content: flex-start;
align-items: flex-start;
flex-flow: wrap;
padding-bottom: 8rem;
}
.blogPage .blog::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 50%;
width: 50vw;
height: auto;
aspect-ratio: 1/1;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/bg_O_gris.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.blogPage .blog::after {
content: "";
position: absolute;
z-index: -1;
bottom: 4rem;
left: 50%;
width: 50vw;
height: auto;
aspect-ratio: 1/1;
background-image: url(https://www.ozerim.fr/wp-content/themes/ozerim/assets/chart/bg_Z_gris.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
body.blog {
gap: unset;
justify-content: unset;
align-items: unset;
flex-flow: unset;
padding-bottom: unset;
}
.blog .blog__item {
position: relative;
width: calc(33.33% - 0.667rem);
align-items: flex-start;
}
.blog .blog__item:hover {
background-color: var(--green);
}
.blog__item__link::before {
content: "";
position: absolute;
z-index: 4;
display: block;
inset: 0;
}
.blog .blog__item__content {
padding: 3.5rem 2rem;
}
.blog .blog__item__content p {
color: var(--black);
margin-bottom: 2rem;
}
.blog .blog__item__header {
margin-bottom: 1rem;
justify-content: flex-start;
flex-flow: wrap;
}
.blog .blog__item__title {
font-size: 2rem;
}
.blog .blog__item__cat {
position: relative;
z-index: 5;
}
.blog .blog__item:hover .btn {
background-color: var(--black);
border-color: var(--black);
}
.blog .blog__item__sticky {
width: 100%;
flex-direction: row;
align-items: stretch;
}
.blog .blog__item__sticky figure {
width: 50%;
aspect-ratio: 4/3;
}
.blog .blog__item__sticky .blog__item__content {
width: calc(50% - 60px);
margin: 0 30px;
justify-content: center;
}
.intropage__cat {
min-height: unset;
}
.intropage__cat .intro__text{
width: 100%;
}
@media (max-width: 1000px) {
.blog .blog__item {
width: calc(50% - 0.5rem);
}
.blog .blog__item__sticky {
width: 100%;
}
}
@media (max-width: 768px) {
.blog .blog__item__sticky {
width: 100%;
flex-direction: column;
align-items: flex-start;
}
.blog .blog__item__sticky figure {
width: 100%;
}
.blog .blog__item__sticky .blog__item__content {
width: 100%;
margin: 0;
justify-content: flex-start;
}
}
@media (max-width: 640px) {
.blog .blog__item {
width: 100%;
}
}
.blog__pagination {
width: 100%;
justify-content: center;
align-items: center;
margin-bottom: 60px;
}
.blog__pagination .nav-links {
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
gap: 6px;
}
.blog__pagination .nav-links span,
.blog__pagination .nav-links a {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
font-size: var(--fontSize400);
font-weight: 600;
color: var(--black);
background-color: var(--white);
border: 2px solid var(--green);
text-decoration: none;
border-radius: 100%;
overflow: hidden;
transition: all 0.3s var(--expoInOut);
}
.blog__pagination .nav-links span.current,
.blog__pagination .nav-links a:hover {
background-color: var(--green);
color: var(--white);
}
.single .main {
align-items: flex-start;
margin: 0!important;
}
.single__article {
width: 100%;
margin: 0 0 1rem 0;
}
.single__article h1 {
font-size: var(--fontSize800);
font-weight: 700;
}
.single__main {
width: 100%;
justify-content: space-between;
align-items: flex-start;
}
.single__content {
position: relative;
z-index: 2;
width: calc(100% - 360px);
padding-top: 20px;
}
.single__header {
position: relative;
width: calc(95% - 40px);
max-width: 1000px;
align-items: flex-start;
align-self: center;
margin-bottom: 40px;
}
.single__header::before {
content: "";
position: absolute;
z-index: -1;
top: -20px;
left: -30px;
width: calc(100% + 60px);
height: calc(100% + 40px);
background-color: var(--white);
}
.single__image {
position: relative;
z-index: 2;
width: 100vw;
height: auto;
min-height: 300px;
overflow: hidden;
}
.single__image::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100vw;
height: 100%;
opacity: 0.5;
background-color: var(--blue);
}
.single__image__content {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--maxwidth);
justify-content: flex-start;
align-items: flex-start;
color: var(--white);
padding: 60px 0;
}
.single__image__date {
font-size: var(--fontSize500);
font-weight: 500;
color: var(--white);
}
.single__image img {
position: absolute;
z-index: -2;
top: -40px;
left: -40px;
width: calc(100% + 80px);
max-width: unset;
height: calc(100% + 80px);
object-fit: cover;
filter: blur(10px);
}
.single .ariane {
margin: 1rem 0 0 0;
}
.ariane {
align-self: flex-start;
}
.ariane ul {
margin: 0;
padding: 0;
list-style: "> ";
gap: 10px 0;
justify-content: flex-start;
flex-flow: wrap;
}
.ariane ul li {
margin-left: 26px;
}
.ariane ul li:first-child {
list-style: none;
margin-left: 0;
}
.single__article h2 {
margin-top: 4rem;
}
.single__article h2,
.post-type-post h2.block-editor-rich-text__editable {
font-family: var(--font1);
font-size: var(--fontSize600);
font-weight: 700;
text-transform: unset;
letter-spacing: normal;
}
.single__campagne {
position: relative;
width: calc(100vw - 40px);
padding: 40px 20px;
background-color: var(--blue);
color: var(--white);
}
.single__campagne__inner {
width: 100%;
max-width: var(--maxwidth);
align-items: flex-start;
justify-content: flex-start;
gap: 20px 40px;
flex-flow: wrap;
}
.single__campagne .single__campagne__item {
justify-content: flex-start;
align-items: flex-start;
gap: 16px;
}
.single__campagne .single__campagne__item figure {
width: 40px;
height: 40px;
border-radius: 100%;
background-color: var(--blue);
}
.single__campagne .single__campagne__item figure img {
width: 100%;
height: 100%;
object-fit: contain;
}
.single__campagne .single__campagne__item__content {
justify-content: flex-start;
align-items: flex-start;
}
.single__campagne .single__campagne__item__content span {
text-transform: capitalize;
}
.single__sidebar {
align-items: flex-start;
width: 300px;
padding-bottom: 4rem;
}
.single__sidebar__header {
width: 100%;
margin-top: 4rem;
}
.single__sidebar__header img {
width: 200px;
height: auto;
}
.single__sidebar__header p {
font-size: 14px;
text-align: center;
}
.single__sidebar__title {
font-size: var(--fontSize500);
font-weight: 600;
margin-top: 2rem;
margin-bottom: 1rem;
}
.single__sidebar .share {
margin: 0;
}
.single__sidebar__cats {
width: 100%;
align-items: flex-start;
flex-direction: column;
gap: 0.4rem;
}
.single__sidebar__posts {
width: 100%;
align-items: flex-start;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
}
.single__sidebar__posts .articles__item {
position: relative;
width: 100%;
flex-direction: row;
justify-content: center;
align-items: flex-start;
padding: 1rem 0;
background-color: var(--white);
transition: all 0.3s;
}
.single__sidebar__posts .articles__item:hover {
background-color: var(--green);
}
.single__sidebar__posts .articles__item__date {
top: 10px;
left: 10px;
width: 50px;
height: 50px;
font-size: var(--fontSize450);
transform: unset;
}
.single__sidebar__posts .articles__item__date span {
font-size: var(--fontSize600)
}
.single__sidebar__posts .articles__item figure {
width: 30%;
height: auto;
aspect-ratio: 1/1;
margin-bottom: 0;
}
.single__sidebar__posts .articles__item figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
.single__sidebar__posts .articles__item__content {
width: calc(70% - 1rem);
margin-left: 1rem;
align-items: flex-start;
}
.single__sidebar__posts .articles__item__content p {
display: none;
color: var(--black);
}
.single__sidebar__posts .articles__item__content p,
.single__sidebar__posts .articles__item__content .btn,
.single__sidebar__posts .blog__item__date {
display: none;
}
.single__sidebar__posts .blog__item__cat a {
position: relative;
font-size: 1.2rem;
font-weight: 600;
text-decoration: none;
background-color: transparent;
color: var(--green);
padding: 0;
transition: all 0.3s;
}
.single__sidebar__posts .articles__item:hover .blog__item__cat a {
color: var(--white);
}
.single__sidebar__posts .articles__item__title {
font-size: 1.4rem;
font-weight: 600;
}
.single__sidebar .marge {
margin-top: 2rem;
}
.single__sidebar .marge2 {
margin-top: 4rem;
}
.share__items {
width: 100%;
justify-content: flex-start;
align-items: flex-start;
flex-flow: wrap;
gap: 1rem;
}
.share__items a, .share__items a img {
width: 25px;
height: 25px;
}
.single__sidebar__posts .share .single__sidebar__title {
margin-top: 0;
}
.share {
align-items: flex-start;
margin: 4rem 0 2rem 0;
align-self: flex-start;
}
.share__items {
gap: 6px;
flex-flow: wrap;
margin-top: 0.66rem;
}
.share__items a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 100%;
background-color: var(--green);
transition: all 0.3s var(--expoInOut);
}
.share__items a:hover {
background-color: var(--black);
}
.share__items a img {
width: 20px;
height: 20px;
object-fit: contain;
}
@media (max-width: 1000px) {
.single__main {
flex-direction: column;
gap: 4rem 0;
}
.single__content {
width: 100%;
}
.single__content .share {
margin-bottom: 0;
}
.single__sidebar {
width: 100%;
padding-bottom: 2rem;
}
.single .blog h2 {
margin-bottom: 0;
}
.single .blog__items {
margin-top: 0;
}
.single__sidebar__header {
position: relative;
z-index: 2;
width: calc(100% - 4rem);
padding: 2rem;
}
.single__sidebar__header::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
background-color: var(--beige);
transform: translateX(-50%);
}
.single__sidebar__header p {
max-width: 400px;
}
.single__sidebar .share {
display: none;
}
.single__sidebar__posts {
width: 100%;
gap: 6rem 1rem;
justify-content: flex-start;
align-items: flex-start;
flex-flow: wrap;
margin: 2rem 0;
}
.single__sidebar__posts .articles__item {
flex-direction: column;
width: calc(50% - 1rem);
padding: 0;
}
.single__sidebar__posts .articles__item figure {
width: 100%;
aspect-ratio: 4/3
}
.single__sidebar__posts .articles__item__content {
width: 100%;
padding: 3.5rem 2rem;
box-sizing: border-box;
align-items: flex-start;
margin-left: 0;
}
.single__sidebar__posts .articles__item__cat {
margin-bottom: 1rem;
}
.single__sidebar__posts .articles__item__cat a {
padding: 0 0.6rem;
background-color: var(--green);
color: var(--white);
font-size: 1.4rem;
font-weight: 600;
text-transform: capitalize;
}
.single__sidebar__posts .articles__item__title {
font-size: 2rem;
}
.single__sidebar__title {
font-size: var(--fontSize700)
}
.single__sidebar__posts .articles__item__content p,
.single__sidebar__posts .articles__item__content .btn,
.single__sidebar__posts .blog__item__date {
display: flex;
}
.single__sidebar__posts .blog__item__header {
margin-bottom: 1rem;
}
.single__sidebar__posts .blog__item__cat a {
padding: 0 0.6rem;
background-color: var(--green);
color: var(--white);
font-size: 1.4rem;
font-weight: 600;
text-transform: capitalize;
}
.single__sidebar__posts .articles__item:hover .blog__item__cat a {
background-color: var(--white);
color: var(--black);
}
.single__sidebar__posts .articles__item:hover .btn {
background-color: var(--black);
border-color: var(--black);
}
}
@media (max-width: 640px) {
.single__sidebar__posts .articles__item {
width: 100%;
}
}
.zindex-5 {
z-index: 5;
}
.flex-center {
display: flex;
align-items: center;
}
.border-radius-8, .wp-block-cover.border-radius-8 .wp-block-cover__backgorund {
border-radius: 8px;
}
.border-radius-16, .wp-block-cover.border-radius-16 .wp-block-cover__backgorund {
border-radius: 16px;
}
.gap-1 {
gap: 1rem;
}
.gap-05 {
gap: 0.5rem;
}
ul.small-line-height {
gap: 0.8rem;
line-height: 120%;
}
.ovh-cloud-partner {
position: fixed;
z-index: 10;
bottom: 0;
right: 10px;
width: 180px;
max-width: calc(100vw - 20px);
height: auto;
}
@media (max-width: 768px) {
.ovh-cloud-partner {
width: 140px;
}
}
.justify-center {
justify-content: center;
}
@media (min-width: 769px) {
.max-width-400 {
max-width: 400px;
}
}
.grecaptcha-badge {
display:none!important;
}