html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, a, cite,
em, img, small, strong, sub, sup, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, figure, figcaption, footer,
header, hgroup, menu, nav, section, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
::selection {
background: #e0e0e0;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background: #6db745;;
} html {
font-family: "Montserrat", sans-serif;
font-size: 0.5208337vw;
color: #000000;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
line-height: 1;
}
h1, h2, h3, h4, h5, p, ul, ol, li, blockquote, small {
font-family: "Poppins", sans-serif;
font-size: max(15px, 1.6rem);
font-weight: 400;
line-height: 1.5;
}
h1 {
font-size: max(20px, 3rem);
text-transform: uppercase;
font-weight: bold;
color: #6db745;
margin-bottom: max(20px, 3rem);
line-height: 1;
}
h2 {
font-size: max(18px, 2.8rem);
text-transform: uppercase;
font-weight: normal;
color: #6db745;
margin-top: max(18px, 2.8rem);
margin-bottom: max(18px, 2.8rem);
line-height: 1;
}
a, span {
color: inherit;
}
strong {
font-weight: bold;
}  input,
select,
textarea,
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: inherit;
border: 0;
padding: 0;
margin: 0;
border-radius: 0;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
} .cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
.mw {
position: relative;
width: 100%;
padding-left: 40rem;
padding-right: 40rem;
margin: 0 auto;
}
.flex {
display: flex;
justify-content: space-between;
}
.flex > * {
flex: 1;
}
.bg-1 {
background: white url(//www.e-connect.africa/wp-content/themes/mddw/res/imgs/visu_vert.svg) no-repeat right 85vw top 5rem / 55rem auto;
color: #00087c;
}
.bg-2 {
background: #eef5fd url(//www.e-connect.africa/wp-content/themes/mddw/res/imgs/visu_bleu.svg) no-repeat left 85vw top 5rem / 55rem auto;
color: #00087c;
}
.bg-3 {
background: #00087c;
color: white;
}
body > header {
border-bottom: 2rem solid #00087c;
}
main > section > div {
padding-top: 6rem;
padding-bottom: 6rem;
}
.contenu-chiffres > div > div {
text-align: center;
}
.contenu-chiffres > div > div > p:first-child {
font-family: "Raleway", sans-serif;
font-weight: 900;
font-size: 8rem;
line-height: 1;
text-transform: uppercase;
margin-bottom: 2rem;
}
.contenu-chiffres > div > div > p:first-child + p {
font-family: "Poppins", sans-serif;
font-size: 3rem;
text-transform: uppercase;
color: #6db745;
line-height: 1.1;
}
.contenu-texte p {
margin-bottom: 2rem;
}
.contenu-texte *:last-child {
margin-bottom: 0;
}
.contenu-texte .cta {
display: inline-block;
vertical-align: top;
background: #00087c;
color: white;
text-decoration: none;
text-transform: uppercase;
font-family: "Poppins", sans-serif;
font-weight: bold;
padding: 1rem;
font-size: 2rem;
margin-bottom: 2rem;
}
footer > div:first-child {
padding-top: 8rem;
padding-bottom: 4rem;
}
footer > div:first-child:empty {
display: none;
}
footer > div:first-child > div > div:first-child {
flex: 0 0 30%;
padding-right: 2rem;
border-right: 0.1rem solid white;
}
footer > div:first-child > div > div:first-child > p {
font-size: max(12px, 1.4rem);
}
footer > div:first-child > div > div:first-child + div {
flex: 0 0 60%;
}
footer form > div {
display: flex;
column-gap: 2rem;
}
footer form > div > textarea,
footer form > div > input {
flex: 1;
background: transparent;
border-bottom: 0.1rem solid white;
color: white;
font-size: max(12px, 1.4rem);
margin-bottom: 2rem;
height: 4rem;
line-height: 4rem;
}
footer form > div > textarea {
height: 8.2rem;
line-height: 2rem;
resize:none;
}
footer form > div > textarea::placeholder,
footer form > div > input::placeholder {
color: white;
}
footer form > div > input[type=submit] {
background: white;
border: 0;
color: #00087c;
font-size: max(14px, 1.6rem);
margin-top: 2rem;
cursor: pointer;
}
footer > div:first-child + div {
background: #000749;
padding-top: 4rem;
padding-bottom: 4rem;
}
footer > div:first-child + div > div > div {
flex: 0 0 25%;
text-align: right;
}
footer > div:first-child + div > div > div:first-child > a {
display: block;
width: 30rem;
position: relative;
left: -3rem;
}
footer > div:first-child + div > div > div:first-child > a > img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 48/20;
object-fit: cover;
object-position: top;
}
footer > div:first-child + div > div > div:first-child + div {
flex: 0 0 50%;
padding-top: 2rem;
}
footer > div:first-child + div > div ul {
list-style: none;
display: inline-block;
}
footer > div:first-child + div > div ul li {
display: inline-block;
padding: 0 2rem;
}
footer > div:first-child + div > div ul a {
font-size: max(12px, 1.4rem);
text-decoration: none;
}
body > header > .mw {
padding: 2rem 8rem;
}
body > header .flex {
align-items: center;
}
body > header .flex > div:first-child {
flex: 0 0 20%;
}
body > header .flex > div:first-child > a {
display: block;
width: 40rem;
}
body > header .flex > div:first-child > a > img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 48/20;
object-fit: cover;
object-position: top;
}
body > header .flex > div:first-child + div {
flex: 1;
}
body > header .flex > div:first-child + div > ul {
text-align: right ;
}
body > header .flex > div:first-child + div > ul > li {
display: inline-block;
vertical-align: top;
margin-left: 4rem;
}
body > header .flex > div:first-child + div > ul > li.has-ssmenu {
padding-right: 4rem;
background: url(//www.e-connect.africa/wp-content/themes/mddw/res/imgs/fleche.svg) no-repeat right 0.85rem / 2.5rem auto;
position: relative;
}
body > header .flex > div:first-child + div > ul > li > ul {
position: absolute;
z-index: 100;
top: 100%;
left: 0;
right: 0;
display: none;
padding: 2rem;
background: white;
}
body > header .flex > div:first-child + div > ul > li > ul:hover,
body > header .flex > div:first-child + div > ul > li:hover > ul {
display: block;
}
body > header .flex > div:first-child + div > ul > li > a {
text-transform: uppercase;
font-family: "Poppins", sans-serif;
font-weight: 500;
text-decoration: none; 
font-size: max(13px, 2.2rem);
color: #00087c;
}
body > header .flex > div:first-child + div > ul > li > ul > li {
display: block;
text-align: left;
width: 100%;
}
body > header .flex > div:first-child + div > ul > li > ul > li + li {
margin-top: 1rem;
}
body > header .flex > div:first-child + div > ul > li > ul > li > a {
color: #00087c;  
font-size: 1.5rem;
line-height: 1.2;
text-decoration: none;
}
.section-projet {
aspect-ratio: 100/12;
background: url(//www.e-connect.africa/wp-content/themes/mddw/res/imgs/top.png) no-repeat center center / cover;
}
.section-projet > div > div {
display: flex;
align-items: center;
height: 100%;
}
.section-projet > div.mw {
padding-left: 30rem;
padding-right: 30rem; 
height: 100%;
}
.section-projet > div > div > p {
width: 100%;
font-family: "Poppins", sans-serif;
font-size: max(20px, 4.7rem);
font-weight: bold;
text-transform: uppercase;
color: white;
text-align: center;
line-height: 1.2;
}
.section-logos {
border-bottom: 1rem solid #00087c
}
.section-logos > div > div > div {
flex: 0 0 47%;
display: flex;
align-items: center;
column-gap: 2rem;
}
.section-logos > div > div > div > a {
flex: 1;
}
.section-logos > div > div > div + div > a:first-child {
flex: 2;
}
.section-logos > div > div > div > a > img {
display: block;
width: 100%;
height: auto;
}
.contenu-cartes > h2 {
font-weight: 400;
font-size: 3rem;
text-transform: uppercase;
margin-bottom: 2rem;
color: #00087c;
}
.contenu-cartes > .flex {
column-gap: 4rem;
}
.carte {
aspect-ratio: 20/20;
display: flex;
flex-direction: column;
color: #00087c;
max-width: 50%;
}
.carte > div {
flex: 0 0 45%;
background: #d8dada;
padding: 2rem 12rem 0;
}
.carte > div + div {
flex: 0 0 55%;
padding: 10rem 6rem 0;
background: white;
}
.carte > div > div {
position: relative;
display: block;
width: 100%;
}
.carte > div > div > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
}
.carte p:first-child {
font-size: 2.4rem;
font-weight: bold;
}
.carte p:first-child + p {
font-size: 1.8rem;
}
.carte p:first-child + p + p {
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 2rem;
}
.carte a img,
.carte a {
display: block;
width: 5rem;
height: auto;
}
.dates {
}
.dates > div:first-child + div + div,
.dates > div:first-child {
position: relative;
z-index: 10;
height: 12rem;
}
.dates > div:first-child + div + div > div,
.dates > div:first-child > div {
position: absolute;
width: 12rem;
transform: translateX(-50%);
}
.dates > div:first-child > div {
top: 0;
}
.dates > div:first-child + div + div > div {
bottom: 0;
}
.dates div.pos-0 {
left: 0%;
}
.dates div.pos-10 {
left: 10%;
}
.dates div.pos-20 {
left: 20%;
}
.dates div.pos-30 {
left: 30%;
}
.dates div.pos-40 {
left: 40%;
}
.dates div.pos-50 {
left: 50%;
}
.dates div.pos-60 {
left: 60%;
}
.dates div.pos-70 {
left: 70%;
}
.dates div.pos-80 {
left: 80%;
}
.dates div.pos-90 {
left: 90%;
}
.dates div.pos-100 {
left: 100%;
}
.dates > div:first-child + div {
height: 2rem;
position: relative;
}
.dates > div:first-child + div > span {
display: block;
height: 2rem;
}
.dates > div:first-child + div > span:nth-child(odd) {
background: #00087c;
}
.dates > div:first-child + div > span:nth-child(even) {
background: #2d9acf;
}
.dates > div > div > div {
position: absolute;
z-index: 1;
width: 4rem;
height: 4rem;
border-radius: 4rem;
background: #d8dada;
left: 50%;
transform:translateX(-50%)
}
.dates > div:first-child > div > div {
top: 11rem;
}
.dates > div > div > p {
position: relative;
z-index: 10;
font-size: 1.5rem;
line-height: 1.3;
text-align: center;
background-color: white;
padding: 0.5rem 0;
}
.bg-2 .dates > div > div > p {
background: #eef5fd;
}
header > button {
display: none;
}
.dates .texte:after {
content: "";
position: absolute;
top: 0;
left: 50%;
height: 12rem;
width: 0;
transform: translate(-0.1rem, 0);
border-left: 0.2rem dotted #d8dada;;
}
.dates > div + div + div .texte:after {
bottom: 0;
top: initial;
}
.dates > div > div > p > strong {
display: block;
color: #2d9acf;
}
.dates > div > div > img {
display: block;
width: 4rem;
height: auto;
margin: 0 auto;
margin-top: 4rem;
}
.dates > div + div + div > div > img {
margin-bottom: 4rem;
margin-top: 0;
}
.dates > div > div.double > div {
left: 4rem;
}
.dates > div > div.double > div:last-child {
right: 0rem;
left: initial;
}
.dates > div > div.double.double {
width: 24%;
transform: translateX(-2rem);
}
.dates > div > div.double.pos2-10 {
width: 10%;
}
.dates > div > div.double.pos2-20 {
width: 20%;
}
.dates > div > div.double.pos2-30 {
width: 30%;
}
.dates > div > div.double.pos2-40 {
width: 40%;
}
.dates > div > div.double.pos2-50 {
width: 50%;
}
.dates > div > div.double.pos2-60 {
width: 60%;
}
.dates > div > div.double.pos2-70 {
width: 70%;
}
.dates .texte.double:after {
content: "";
position: absolute;
top: 7rem;
left: 4rem;
right: 4rem;
width: auto;
height: 5rem;
transform: translate(-0.1rem, 0);
border: 0.2rem dotted #d8dada;
border-bottom: 0;
}
.dates > div + div + div .texte.double:after {
bottom: 7rem;
border: 0.2rem dotted #d8dada;
border-top: 0;
top: initial;
}
.dates > div > div.first > p {
text-align: right;
transform: translateX(-5rem);
}
.pos-0 img {
transform: translate(-6rem, -7rem);
}
.dates > div > div.pos-100 > div {
background: #cf1410;
} 
.dates > div > div.last > p {
text-align: left;
transform: translateX(5rem);
}
@media (max-width: 1180px) {
.mw {
padding-left: 20rem;
padding-right: 20rem;
}
.carte > div {
flex: 0 0 45%;
background: #d8dada;
padding: 2rem 18rem 0;
}
.section-projet > div.mw {
padding-left: 10rem;
padding-right: 10rem;
}
}
@media (max-width: 900px) {
.dates {
display: flex;
justify-content: center;
padding: 50px 0;
}
.dates.dates.dates > div {
flex: 0 0 100px;
height: 500px;
}
.dates.dates > div:first-child + div {
flex: 0 0 10px;
flex-direction: column;
}
.dates.dates div.pos-0 {
left:initial;
top: 0%;
}
.dates.dates div.pos-10 {
left:initial;
top: 10%;
}
.dates.dates div.pos-20 {
left:initial;
top: 20%;
}
.dates.dates div.pos-30 {
left:initial;
top: 30%;
}
.dates.dates div.pos-40 {
left:initial;
top: 40%;
}
.dates.dates div.pos-50 {
left:initial;
top: 50%;
}
.dates.dates div.pos-60 {
left:initial;
top: 60%;
}
.dates.dates div.pos-70 {
left:initial;
top: 70%;
}
.dates.dates div.pos-80 {
left:initial;
top: 80%;
}
.dates.dates div.pos-90 {
left:initial;
top: 90%;
}
.dates.dates div.pos-100 {
left:initial;
top: 100%;
}
.dates > div > div > p {
font-size: 12px;
text-align: left;
display: inline-block;
}
.dates > div:first-child + div + div > div, .dates > div:first-child > div {
width: 80px;
transform: translateY(-50%);
}
.dates > div:first-child + div + div > div {
text-align: right;
}
.dates.dates > div > div > div {
width: 20px;
height: 20px;
border-radius: 20px;
left: initial;
right: -35px;
transform: translateY(-50%);
top: 50%;
}
.dates .texte:after {
content: "";
position: absolute;
top: 50%;
left: 5px;
height: 0px;
width: 95px;
transform: translateY(-50%);
border: 2;
border-top: 2px dotted #d8dada;
}
.dates > div > div > img {
width: 25px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
}
.dates > div:first-child + div + div > div {
bottom: initial;
}
.dates > div > div.double.pos2-10 {
width: 80px;
height: 50px;
}
.dates > div > div.double.pos2-20 {
width: 80px;
height: 100px;
}
.dates > div > div.double.pos2-30 {
width: 80px;
height: 150px;
}
.dates > div > div.double.pos2-40 {
width: 80px;
height: 200px;
}
.dates > div > div.double.pos2-50 {
width: 80px;
height: 250px;
}
.dates > div > div.double.pos2-60 {
width: 80px;
height: 300px;
}
.dates > div > div.double.pos2-70 {
width: 80px;
height: 350px;
}
.dates > div > div.double.double {
transform: none;
}
.dates.dates > div > div.double > div {
top: 0;
}
.dates > div > div.double > div:last-child {
top: 100%;
bottom: initial;
right: -35px;
}
.dates > div > div.double > p {
position: absolute;
top: 50%;
width: 70px;
transform: translateY(-50%)
}
.dates .texte.double:after {
top: 0;
left: 80px;
right: -25px;
width: auto;
height: auto;
transform: none;
border: 2px dotted #d8dada;
bottom: 0;
border-right: 0;
}
.dates > div + div + div > div.double {
text-align: right;
right: 0;
}
.dates > div + div + div > div.double p {
right: 0;
left: initial;
text-align: right;
}
.dates > div + div + div .texte.double:after {
bottom: 0;
border: 2px dotted #d8dada;
border-left: 0;
top: 0;
right: 80px;
left: -25px;
}
}
@media (max-width: 768px) {
html {}
.section-projet {
aspect-ratio: 100/45;
}
body > header .flex > div:first-child > a {
width: 120rem;
margin: 0 auto;
}
body > header > .mw {
padding: 4rem 8rem;
}
body > header .flex  {
display: block;
}
.section-logos > div > .flex {
flex-direction: column;
gap: 10rem;
}
body > header .flex > div:first-child + div > ul {
display: none;
}
main > section > div {
}
.bg-1 {
background: white url(//www.e-connect.africa/wp-content/themes/mddw/res/imgs/visu_vert.svg) no-repeat -180rem top;
}
.contenu-cartes > .flex {
flex-direction: column;
gap: 10rem;
}
main > section > div {
padding-top: 12rem;
padding-bottom: 12rem;
}
.carte {
aspect-ratio: 20/26;
max-width: 100%;
}
.carte > div + div {
padding: 30rem 12rem 0;
}
.carte p:first-child {
font-size: 10rem;
}
.carte p:first-child + p + p,
.carte p:first-child + p {
font-size: 8rem;
}
.carte a img, .carte a {
width: 15rem;
}
.carte > div {
padding: 10rem 25rem 0;
}
.contenu-chiffres .flex {
flex-wrap: wrap;
gap: 10rem;
}
.contenu-chiffres > div > div > p:first-child {
font-size: 20rem;
}
.contenu-chiffres > div > div > p:first-child + p {
font-size: 10rem;
}
.contenu-chiffres > div > div {
flex: 0 0 calc(50% - 5rem);
}
footer > div > div {
flex-direction: column;
gap: 10rem;
}
footer > div:first-child > div > div:first-child {
border: 0;
}
footer form > div {
display: flex;
column-gap: 10rem;
}
footer form > div > textarea, footer form > div > input {
margin-bottom: 8rem;
height: 10rem;
line-height: 10rem;
}
footer form > div > textarea {
height: 40rem;
}
footer form > div > input[type=submit] {
height: 10rem;
}
footer > div:first-child + div > div > div:first-child > a {
display: block;
width: 80rem;
position: relative;
margin: 0 auto;
}
footer > div:first-child + div {
padding-top: 12rem;
padding-bottom: 12rem;
}
body > header .flex > div:first-child + div > ul {
position: absolute;
z-index: 100;
top: 100%;
left: 0;
right: 0;
background: white;
padding: 30px 0;
display: none;
}
body > header .flex > div:first-child + div > ul.open {
display: block;
}
body > header .flex > div:first-child + div > ul > li {
display: block;
text-align: center;
margin-bottom: 20px;
}
body > header .flex > div:first-child + div > ul > li > a {
text-transform: uppercase;
font-family: "Poppins", sans-serif;
font-weight: 500;
text-decoration: none;
font-size: 30px;
color: #00087c;
}
body > header .flex > div:first-child + div > ul > li > a br {
display: none;
}
body > header .flex > div:first-child + div > ul > li > ul {
position: static;
display: block;
}
body > header .flex > div:first-child + div > ul > li > ul > li + li,
body > header .flex > div:first-child + div > ul > li > ul > li {
text-align: center;
margin-top: 10px;
}
body > header .flex > div:first-child + div > ul > li > ul > li > a {
font-size: 25px;
}
body > header .flex > div:first-child + div > ul > li.has-ssmenu {
background: none;
padding: 0;
}
header {
position: relative;
}
header > button {
display: block;
position: absolute;
top: 50%;
right: 6rem;
background: none;
transform: translateY(-50%);
cursor: pointer;
}
header > button > img {
display: block;
width: 12rem;
height: auto;
}
footer > div:first-child + div > div > div:first-child + div {
text-align: center;
}
footer > div:first-child + div > div ul a {
font-size: 15px;
}
footer > div:first-child + div > div > div {
text-align: center;
}
footer > div:first-child + div > div > div img {
display: inline-block;
width: 30px;
height: auto;
margin: 0 20px;
}
.contenu-cartes > h2 {
font-size: 20px;
margin-bottom: 20px;
}
.contenu-texte .cta {
padding: 10px;
font-size: 15px;
margin-bottom: 15px;;
}
}
@media (min-width:325px) {
body > header .flex > div:first-child + div > ul > li > a {
font-size: 20px;
}
body > header .flex > div:first-child + div > ul > li > ul > li > a {
font-size: 15px;
}
}
@media (min-width:1920px) {
html {
font-size: 10px;
}
.mw > div {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.section-projet > div > div {
max-width: 1300px;
}
body > header .flex {
max-width: 1750px;
}
}
@media (max-width:1500px) {
body > header .flex > div:first-child + div > ul > li > a {
font-size: 16px;
}
}