body { font-family: 'Poppins' }
a:hover { color: #df373f !important }
.condition a{text-decoration: none !important;     color: #696969;font-size: 14px;}
header .nav a { color: #4d4d4d  }
.bg-body-tertiary { background:white !important }
header .nav .active { font-weight: bold; color: #df373f  }
.header2 { width: 100%; padding: 25px 0  }
.logo { width:140px  }
.header-top { background: #222224; width:100%; height:66px }
.nav-link .enveloppe { width:36px }
.nav-link .phone { width:36px }
.nav-link { color:white; padding-top: 15px; }
.social-icon-fb { width:11px; }
.social-icon-ins { width:20px }
.social-icon-in { width:20px }
.nav-social { float: right; }

.first-left { min-height:400px; background: #222224 }
.first-left-content {   }
.first-left-title { margin: 0 0 0 1px; color: #ffffff; font-size: 50px; font-weight: 600; }
.first-left-txt {  margin: 32px 0 0;  color: #ffffff;  font-size: 28px;   font-weight: 600;  }
.first-left-txt-2 {  margin: 32px 0 0;  color: #ffffff;  font-size: 28px;   }

.first-right-title { margin: 0 0 0 9px; font-size: 23px;  color: #222224 }
.form1 input { border:0; background:transparent; border-bottom: 0.5px solid #e2e2e2 !important; border-radius: 0; font-size: 14px; padding-left: 0}

#about { min-height:500px; padding:66px 30px 40px 30px; text-align:center;  }
#about .title { font-size: 40px;  }
#about h5 { font-weight:600; margin-top:20px; font-size: 18px; }


#expertises { min-height:500px; padding:66px 30px; background: #f0f0f0;  }
#expertises .title { font-size: 40px; text-align:center;  }
.expertises-card { height:480px; background: white; padding: 40px 20px;  }
.expertises-card:hover { background: #df373f !important }
.expertises-card h2 { font-weight: bold; font-size: 25px; }
.expertises-card hr { width:40px; border-top: 4px solid #df373f; opacity:1 }
.expertises-card p { color:#222224 }
.expertises-card:hover h2 { color: white; } 
.expertises-card:hover ul li { color: white !important; } 
.expertises-card li {
  transition: color 0.3s ease;
}

.expertises-card:hover li {
  color: white;
}

.expertises-card:hover hr { border-top: 4px solid white; opacity:1 } 

#demarche { min-height:500px; padding:66px 30px; background: #f0f0f0;   }
#demarche .title { font-size: 40px; text-align:center;   }
.demarche-card { width:20%; min-height:310px;  padding: 40px 30px;   }
.demarche-card h2 { font-weight: bold; font-size: 25px; margin-bottom:30px; color:white }
.demarche-card p { color:white }
.demarche-card-bg1 { background: #1c1c1d;  }
.demarche-card-bg2 { background: #333334; }
.demarche-card-bg3 { background: #48484a; }
.demarche-card-bg4 { background: #5d5d5e; }
.demarche-card-bg5 { background: #727273; }
.demarche-card-title { min-height:76px }

#clients { min-height:300px; padding:66px 30px;   }
#clients .title { font-size: 40px; text-align:center;   }
#clients .content img { width:100% }

#statics { min-height:500px; padding:66px 30px; background: #f0f0f0   }
#statics .title { font-size: 40px; text-align:center;   }
#statics .count { font-size:50px; text-align:center; border:1px solid #79787d; padding:40px 20px; min-height: 217px; }
#statics .value { font-size:50px !important; font-weight:bold;  }
#statics .count span { font-size:20px; display:block;  }
#statics .count-txt { color:#818181  }

#why { min-height:500px; padding:66px 30px;   }
#why .title { font-size: 40px; text-align:center;   }
#why h2{ font-weight:bold; color:#df373f   }
#why p{ text-align:justify;   }

footer { background:#222224; min-height: 180px; color:white }
footer .icon-tel { width:50px; margin-bottom:15px  }
footer .icon-social { width:40px; margin-bottom:15px  }
footer a { color:white; text-decoration:none  }
footer a:hover { color:#df373f  }

.anim-expertises{ position: relative; transform: translateY(150px); opacity: 0; transition: 1s all ease; }
.anim-expertises.active{ transform: translateY(0); opacity: 1; }

.anim-about{ position: relative; transform: translateY(150px); opacity: 0; transition: 1s all ease; }
.anim-about.active{ transform: translateY(0); opacity: 1; }

.anim-demarche{ position: relative; transform: translateY(150px); opacity: 0; transition: 1s all ease; }
.anim-demarche.active{ transform: translateY(0); opacity: 1; }

.anim-clients{ position: relative; transform: translateY(150px); opacity: 0; transition: 1s all ease; }
.anim-clients.active{ transform: translateY(0); opacity: 1; }

.anim-statics{ position: relative; transform: translateY(150px); opacity: 0; transition: 1s all ease; }
.anim-statics.active{ transform: translateY(0); opacity: 1; }

.anim-why{ position: relative; transform: translateY(150px); opacity: 0; transition: 1s all ease; }
.anim-why.active{ transform: translateY(0); opacity: 1; }

.about-txt { width:50%; margin:auto; }

/*Web*/
@media only screen and (min-width: 1400px) {
	.demarche-card-bg1::before { content: ''; background: url("imgs/arrow.png"); background-size: cover; width: 30px; height: 30px; position: absolute; left: 18.8%; z-index: 0; top: 0; bottom: 0; margin: auto; }
	.demarche-card-bg2::before { content: ''; background: url("imgs/arrow.png"); background-size: cover; width: 30px; height: 30px; position: absolute; left: 38.8%; z-index: 0; top: 0; bottom: 0; margin: auto; }
	.demarche-card-bg3::before { content: ''; background: url("imgs/arrow.png"); background-size: cover; width: 30px; height: 30px; position: absolute; left: 58.8%; z-index: 0; top: 0; bottom: 0; margin: auto; }
	.demarche-card-bg4::before { content: ''; background: url("imgs/arrow.png"); background-size: cover; width: 30px; height: 30px; position: absolute; left: 78.8%; z-index: 0; top: 0; bottom: 0; margin: auto; }
}

/*Mobile*/
@media only screen and (max-width: 1400px) {
	.demarche-card { min-height:405px; }
	.about-txt { width:90%; margin:auto; }
	.demarche-card { width:100%; min-height:260px; }
	.demarche-card-title { min-height:42px  }
	.home-left { padding:25px 25px !important }
	.first-left-title { font-size:35px }
	.first-left-txt { font-size:21px }
	.first-left-txt-2 { font-size:21px }
	.logo { margin-left: 26px; }
}

@media only screen and (max-width: 1200px) {
	.expertises-card { min-height:440px; }
	.about-txt { width:90%; margin:auto; }
	.demarche-card { width:100%; min-height:260px; }
	.demarche-card-title { min-height:42px  }
}

@media only screen and (max-width: 600px) {
	.header-top .nav { font-size:12px }
	.navbar-toggler { border:0 !important }
	.navbar-toggler:active { border:0 !important }
	header .nav  { display:block }
	.formular { margin-bottom:40px }
	.notice { margin-bottom:50px }
	.about-txt { width:90%; margin:auto; }
	.demarche-card { width:100%; min-height:210px; }
	.demarche-card-title { min-height:42px  }
	.formular { width: 88%; margin: auto; padding: 26px 23px !important; margin-bottom: 28px; }
	.form-control { margin-bottom:10px }
	.formular .row { margin-bottom:0 !important; margin-top: 0 !important; }
	.formular input { font-size:12px }
	.input50 { width:50% }
	.first-right-title { font-size:20px }
	.br { display: none; }
	.header-top { display:none }
	.notice { width:50% }
	.notice img { width:160px !important }
	#about h5 { font-size:15px }
	.certifications { margin-top:0 !important }
	.certifications-box { width:33.33% }
	.certifications-box  img{ width:100% !important }
	.expertises { margin-top:20px !important }
	#demarche { padding-top:0 }
	.demarche-card h2 { font-size:22px }

	#about .title { font-size:28px }
	#expertises .title { font-size:28px }
	#clients .title { font-size:28px }
	#demarche .title { font-size:28px }
	#statics .title { font-size:28px }
	#why .title { font-size:28px }

	.statics-box { width:50% !important }
	#statics .value { font-size:40px !important }
	#statics .count span { font-size:15px; }
	#statics .count {  padding: 23px 20px; min-height: 153px; margin-bottom: 17px; }

	div.why1 {order: 2; padding-top: 28px !important; }
	div.why2 {order: 1;}
	div.why3 {order: 3; padding-top: 8px !important;}
	div.why4 {order: 4; padding-top: 28px !important;}
	div.why5 {order: 6; padding-top: 28px !important;}
	div.why6 {order: 5; }

	#why { padding: 30px 30px; }
	.why { margin-top:20px !important }
	#why h2 { font-size:19px }

	header { position:fixed; width: 100%; top: 0; background: white; z-index: 999; box-shadow: 0 2px 1px -2px #80808063;   }
	#home { padding-top: 98px; }
	.header2 { padding: 10px 0 !important;  }

}