*{
	padding: 0;
	margin: 0;
	max-width: 100vw;
}

html {
  scroll-behavior: smooth;
}


.color1{
	background: #383c44;
	color: white;
}

.hpx-100{
	height: 100px;
}

#menu-mob{

	width:100%;
	
	background: #383c44;

	overflow: hidden;



		
	}

	#logo-m{

	color: white;
		margin: 1vh 0 1vh 2vh;
		float: left;
		height: 6vh;
		line-height: 6vh;
		text-align: right;
		font-size: 5vh;
		top: 0;
		display: flex;

	
}


	#menu-mob2{
		color: white;
		margin: 1vh;
		float: right;
		height: 6vh;
		line-height: 6vh;
		text-align: right;
		font-size: 6vh;
		top: 0;

	

		
	}


	#wrap{
		color: white;
		text-decoration: none;
		width:100vw;
		height: 100vh;
		background: red;
		position: fixed;
		z-index: 4;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background: #383c44;
		padding: 2vh 0 0 0;

	}
	#wrap > div{
		
		margin: 2vh 2vh 0 0;
		height: 7vh;
		line-height: 7vh;
		text-align: right;
		font-size: 7vh;
		top: 0;
		right: 0;

		position: absolute;
		z-index: 5;

	}


	#wrap > a > div{
		width: 100vw;
		margin: auto;
		height: 16vh;
		line-height: 16vh;
		font-size: 3em;
		color: white;
		text-decoration: none;
		text-align: center;


	}

	#wrap > a{
		text-decoration: none;
	}


	#menu{
	width: 100%;
	height: 70px;
	background: #383c44;
	top: 0;
	position: fixed;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
	z-index: 10;
}

#menu > div{
	height: 70px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}



#logo{
	height: fit-content;
	width: fit-content;
	margin: auto 0;


}

#logo > a > img{
	height: 40px;
	margin-left: 0;

}

#selector{
	height: 70px;
	width: fit-content;
	margin-right: 0;
	display: flex;


}

#selector > a {
	height: fit-content;
	width: fit-content;
	padding: 20px 0;
	margin: auto 0 auto 30px;
	display: flex;
	color: inherit;

	text-decoration-color: none;


}

#selector > a > div{
	height: fit-content;
	width: fit-content;
	margin: auto 0;
	color: white;
	text-decoration-color: white;

}


.footer{
background: #383c44;
width: 100%;
}

.footer img{
	width: 70px;
}

.discretfooter a{
	color: inherit;
	text-decoration-color: inherit;

}
.footer > div{
text-align: center;
color: white;
padding: 60px 0 40px 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;

}

.discretfooter{
	color: #707580;
	text-align: center;
	background: #383c44;
	padding: 5px 0;
	font-size: 12px; 
}

.deb{
	width: 100%;
	height: 70px;
}

#logo-m > img{
	height: 4.5vh;
	margin: auto 0;
}

.accueilbanner{
	height:calc(100vh - 300px);
	max-height: 650px;
	background: url('../banner.jpg');
	background-size: cover;
	background-position: center;
	
}

.accueilbanner > div {
	height:calc(100vh - 300px);
	max-height: 650px;
	width: 100vw!important;
	background: rgba(56, 60, 68, 0.5);


}



.accueilbanner > div > div > h2{
	color: white;
	text-shadow: 1px 1px 10px black;
	font-size: 3em;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.accueilbanner > div > div > p{
	color: white;
	text-shadow: 1px 1px 10px black;
	font-size: 1.6em;
}

.solmol{
	background: #db2e8f;
	background-size: cover;
	background-position: center; 
}

#solutions > div > a > span{
	padding-top: 0.5em;
	color:white;
	font-size: 1.5em;
	width: 100%;
	display: inline-block;
	font-weight: bold;
}





#solutions{
	padding: 35px 0;
}

#solutions > div{
	padding: 25px 0;
}


.trusted{
	padding: 30px 0;
	background: #f0f0f0;
}

.trusted > div{

	justify-content: space-between;
	overflow: hidden;
}

.trusted > div > div{
	margin: auto 10px;
	max-height: 40px;
	width: fit-content;
	position: relative;
-webkit-animation: mymove 65s infinite; 
-webkit-animation-timing-function: linear; 
animation: mymove 65s infinite;
animation-timing-function: linear;
white-space:nowrap;
}

.trusted img{
 height: 40px;
 margin: 0 25px;
}





.notreapproche {
	padding: 40px 0;
}

.notreapproche .illu.bigdata > div{

	width: 95%;
	background: url('../concept-d-innovation-et-de-direction-ampoule-rougeoyante-93999618.jpg');
	background-size: cover;
	background-position: center;
	background-color: grey;
border: 1px solid black;
	height: 200px;

}

.notreapproche .illu.collab > div{
	width: 95%;
	background: url('../formation-d-affaires-26689415.jpg');
	background-size: cover;
	background-position: center;

	background-color: grey;
border: 1px solid black;
	height: 200px;

}

.notreapproche .illu.conseil > div{
	width: 95%;
	background: url('../concept-d-innovation-de-direction-et-d-avenir-98246463.jpg');
	background-size: cover;
	background-position: center;
float: right;
	background-color: grey;
	height: 200px;
	border: 1px solid black;


}

.notreapproche .illu.bigdata, .notreapproche .illu.collab, .notreapproche .illu.conseil{
	
	height: 200px;


}



.notreapproche .illu.conseil > div, .notreapproche .illu.bigdata > div, .notreapproche .illu.collab > div{
}


.notreapproche .illu.samusocial > div{

	width: 95%;
	background: url('../asso/samusocial.jpg');
	background-size: cover;
	background-position: center;
	background-color: grey;

	height: 200px;

}

.notreapproche .illu.epic > div{

	width: 95%;
	background: url('../asso/epic.jpg');
	background-size: cover;
	background-position: center;
	background-color: grey;

	height: 200px;

}

.notreapproche .illu.entourage > div{

	width: 95%;
	background: url('../asso/entourage.jpg');
	background-size: cover;
	background-position: center;
	background-color: grey;

	height: 200px;

}

.notreapproche .illu.amfa > div{

	width: 95%;
	background: url('../asso/amfa.png');
	background-size: cover;
	background-position: center;
	background-color: grey;

	height: 200px;

}




.notreapproche .text{
	//width: 40%;
	line-height: 1.5;
	text-align: justify;
	
	
}

.notreapproche .text > img{
	height: 3.5em;
	padding-bottom: 1.2em;
}



.exp{

padding: 40px 0 20px 0;


}

.exp1{
	background: #f0f0f0;
	padding: 30px 0;
}





.exp > div > div > h2{


	color: #db2e8f;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	margin: 0 auto;
	font-size: 1.4em;
	padding-bottom: 20px;

}



.exp .contacth2.h2 > h2{


	color: #db2e8f;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	margin: 0 auto;
	font-size: 1.2em;
	padding-bottom: 20px;

}



.eit > .h2 > div > h2{


	color: #db2e8f;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	margin: 0 auto;
	font-size: 1.4em;
	padding-bottom: 10px;

}




.exp.plateform > div > div > h2{


	color: #db2e8f;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	
	margin: 0 auto;
	font-size: 2em;
	padding-bottom: 0px;

}

.exp > div > div > p{


	text-align: center;
	margin: 0 auto;
	max-width: 75%;
	font-size: 0.7em;
	font-weight: 400;


}

.exp > div > div > p > a{


	text-decoration: none;


}


.exp > div > div > p > a:hover{


	text-decoration: underline;


}

.exp > .row > .h2{
	margin: 20px 0;
}


.schema{
	padding: 50px 0 50px 0;


}

.schema > div{
	display: flex;
	justify-content: space-between;


}


.schema > div > .numero{


	width: 70px;
	height: 70px;
	margin-left: 40px;



}

.schema > div > .numero.n_u{
	background: no-repeat url('../icon_comp/storage.png');
	background-size: contain;
	background-position: center;
}

.schema > div > .numero.n_d{
	background: no-repeat url('../icon_comp/security.png');
	background-size: contain;
	background-position: center;
}

.schema > div > .numero.n_t{
	background: no-repeat url('../icon_comp/network.png');
	background-size: contain;
	background-position: center;
}

.schema > div > .numero.n_q{
	background: no-repeat url('../icon_comp/compute.png');
	background-size: contain;
	background-position: center;
}

.schema > div > .text{

	padding-bottom: 40px;
	margin-bottom: 10px;
	width: calc(100% - 150px);
	border-bottom: 7px solid #383c44;
	font-size: 1.2em;
	


}

.schema > div > .text > h3{
	font-size: 1.7em;
	color: black;
	line-height: 0.8;
	text-transform: uppercase;


}


.contactbg{
	background: url('../contactbg.jpeg');
	background-position: center;
	background-size: cover;
	height: 430px;
	border-bottom: 30px solid #db2e8f; 

}


.psbg{
	background: url('../CyYOR6DXcAIs7d0.jpg');
	background-position: center;
	background-size: contain;
	height: 430px;
	border-bottom: 30px solid #db2e8f; 
	background-repeat: no-repeat;
	background-color: #383c44;

}

.aproposbg{
	background: url('../aproposbg3.png');
	background-position: center;
	background-size: cover;
	height: 430px;
	border-bottom: 30px solid #db2e8f;
}






.bg > .row{
background-color: rgba(0, 0, 0, 0.4);
width: 100vw;
height: 100%;

}


.bg > .row > .contacttitre{
	font-size: 3em;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color: white;
	letter-spacing: 0.5px;
	padding-top: 20rem;
}


.logocontactrs{
	width: 5em;
	margin: 10px 0;
	padding: 10px;
	border-radius: 10px;
	background: #fff;
}


.h2-logocontactrs{
	width: 5em;
	margin: auto 10px;
}

.logocontainercontact{

	display: flex;
	justify-content: center;
	flex-direction: row;
	width: fit-content;
	margin: 0 auto;
}



.technique{
	padding: 60px 0;
	margin-top: 60px;
	background: #f0f0f0;
}

.tag{
	visibility: hidden;
	transform: translateY(-70px);
}

.tag1{
	visibility: hidden;
	transform: translateY(-10px);
}

.conditionsdutilisation{
	padding: 60px 0;
}

.plateform2{
	padding-bottom: 50px;
}

.plateform2 > div > .text{
	margin: 20px 0;
	text-align: justify;
	padding-bottom: 30px;
}

.plateform2 > div > .text > .left{
	margin-right: 15px;
}


.plateform2 > div > .text > .right{
		margin-left: 15px;
}

.plateform2 p{
	border: 0px dashed grey;
	margin: 0 3px;
	padding: 15px;
	background: #F0F0F0;
}

.nosmissioons > div > h3{
	
	margin: 10px 3px 10px 3px;
}

.nosmissioons > div{
	padding-bottom: 20px;
}





.apropos{
	padding: 30px 0;
}



.apropos > div > div > div > h3{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color: #db2e8f;
	font-size:2.3em;
}

.apropos > div{
	padding: 20px 0;

}



.apropos > div > .text{
	margin: 20px 0;
	text-align: justify;
}




.apropos > div > .text > .left{
	margin-right: 15px;
}

.apropos > div > .text > .right{
		margin-left: 15px;
}


.aproposcontact > .roundphoto{
	border-radius: 100%;
	margin: 0 auto;
	height: 160px;
	width: 160px; 

}

.aproposcontact > .roundphoto.guillaumeloisance{
	background: url('../DUONYX-03-2021-VIGNETTES-HD-7.jpg');
	background-size: cover;
	background-position: center;
}

.aproposcontact > .roundphoto.carolinedesmarquest{
	background: url('../DUONYX-03-2021-VIGNETTES-HD-4.jpg');
	background-size: cover;
	background-position: center;
}

.aproposcontact {
	width: fit-content;
	margin: 20px auto;
	background: grey;
	display: flex;
	padding: 20px;

	background: #f0f0f0;
	border-radius: 10px;
}

.aproposcontact > .infoapropos{
	margin: auto;
	padding: 0 20px;

}

.text-color-inherit{
	color: inherit;
}

.text-color-inherit:hover{
	color: inherit;
}


.polsoccontlast{
	padding-bottom: 120px;
}



.nosmissioons > h2{
	color: #db2e8f;	
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	margin: 0;
	font-size: 3em;
}






@-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: -3728px;
}
}
@keyframes mymove{
from {
left: 0px;
}
to{
left: -3728px;
}
}
  





  @media screen and (max-width: 768px) {
  	.logocontainercontact{

	display: flex;
	justify-content: center;
	flex-direction: column;
	width: fit-content;
	margin: 0 auto;
}


  .text > .left{
	margin-right:0!important;
}

.text > .right{
		margin-left:0!important;
}

.apropos > div{
	margin: 0 auto;
}



.notreapproche .illu > div {
	display: none;
}

.notreapproche .text{
	margin: 0 auto;
}

.css-modif-mob{
	margin: 0 auto;
}





}