@media(max-width : 800px){
	body{
		font-size:14px;
	}

	.modals .modal-content {
	    
	   /* width: 60%;
	    min-width:370px;*/

	    width: 50vh;
	    min-width:215px;
	    max-width:345px;

	}

	.modals .contenu-modals-pop-up{

		padding-top:80px;
		padding-bottom:0px;
		padding-right:9px;

	}

	.modals .bouton-pop-up{

		font-size:3vmin !important;
		font-weight: normal;
		height: 40px;
	}

	.contenu-modals-pop-up p{

		text-align: center !important;
	}
	
	input::placeholder {
		color: #cecece;
	}
	
	h1{
		font-size:3.5vmax;
	}
	h2{
		font-size: 3vmax;
	}
	h3{
		font-size: 2.6vmax;
	}
	h4{
		font-size: 2.4vmax;
		padding-top :0 !important;
	}
	h5{
		font-size: 2.2vmax;
    }
	h6{
		font-size: 2vmax ;
	}
	
	h1, h2, h3, h4, h5, h6 {
		padding-bottom: 0 !important;
	}
	.center{
		text-align : center !important;
	}
	i{
		font-style:italic !important;
	}
	
	
	#bloc .content-wrap {
		padding:1em;
		padding-top: 1vw !important;
		padding-bottom: 1vw !important;
	}
	
	#bloc .content-wrap br {
		display :none !important;
	}

	#bloc {
		background-color : transparent !important;
		color : #000;
	}
	
	#bloc .content-text h5{
		padding-top: 0 !important;
		color: #2ac5ba !important;
		font-weight : normal !important;
		line-height: 1.2em;
	}
	#slogan h6,
	#slogan h5{
		color:white !important;
		font-weight: normal;
		padding-top: 1.5vw !important;
	}
	
	#slogan .titre-slogan{
		font-size : 5.5vw;
		padding-top: 5vw;
		line-height: 1.2em;
		padding-right: 2vw;
		padding-left: 2vw;
	}
	#slogan {
		font-weight: bold;
		color: white;
		/*height: 56vw;*/
		height: 66vw !important;
		min-height: 224px;
		max-height: 528px;
		/* margin-bottom: 4vw; */
	}
	
	#section-dev
	
	.apropos #slogan{
		margin-bottom: 3vw !important;
	}
	
	#info img {
		width: 80%;
	}
	
	.grid {
		display: grid;
		grid-template-columns: 1fr;
	}
	
	#bloc br{
		display : none !important;
	}
	
	

	/*----------head---------------------*/
	#head{
		height:auto;
		color:#000;
	}

	#bg-image {
		position: absolute;
		background-color: #9E9E9E;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
		height: 66vw;
		max-height: 528px;
		min-height: 224px;
		z-index: -1;
	}

	#bg-color {
		position:absolute;
		background-color : #9E9E9E;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
		/*height: 200px;*/
		z-index:-1;
	} 

	#head #menu{
		display:grid;
		grid-template-columns:1fr;
		background-color: rgb(186, 187, 188);
	}
    

	#head #menu ul,
	#head #zone-titre ul{
		list-style: none;
		display:flex;
		justify-content:space-around;
	}



	#head #en-tete{
		display:none;
	}
	#head h1 {
		padding-top : 100px;
		padding-bottom :0;
	}
	
	.m-principal{
		display:none;
		font-size: 16px;
		padding: 5px 0;
		width:100%;
		border-bottom: 1px solid #ffffff2e
	}

	.menu-principal{

		display:block;

	}
	
	#logo-manao{
		height: 10vw;
		width: 20vw;
		float : left;
		padding-top: 10px;
		padding-left: 10px;
		background-color: transparent;
	}
	
	/* ---------- logiciel -------------*/
	#gestion,
	#rh,
	#vente,
	#service,
	#logiciel_erp {
		padding-bottom : 1em 1em 1em;
	}



	#gestion .btn{
		background : #FFD52D;
	}

	#rh .btn{
		background : #1976D2;
	}

	#vente .btn{
		background : #317C41;
	}

	#service .btn{
		background : #FF5200;
	}

	#bloc h5{
		color:#000;
	}

	#bloc .content-text, 
	#gestion p,
	#rh p,
	#vente p,
	#service p,
	#logiciel_erp p{
		font-size: 12px;
	}
	
	#gestion .card .card-text,
	#rh .card .card-text,
	#vente .card .card-text,
	#service .card .card-text,
	#logiciel_erp .card .card-text{
		/*min-height: 60px;*/
	}

	#gestion .card .card-logo,
	#rh .card .card-logo,
	#vente .card .card-logo,
	#service .card .card-logo,
	#logiciel_erp .card .card-logo{
		min-height: 100px;
	}
	#bloc .content-title{
		font-size: 20px;
		padding:1vw !important;
		font-weight: bold;
	}
	#bloc .content-text{
		color: #2ac5ba !important;
	}
	
	#bloc .content-text, 
	#gestion p,
	#rh p,
	#vente p,
	#service p{
		font-size: 14px;
	}

	
	#bloc-confiance{
		display:none;
	}
	
	.card .card-text {
		color: #333;
	}

	/*---------footer---------*/
	#mobile-footer,
	#mobile-footer h4{
		display:block;
		background-color: #393E46;
		color:white !important;
		font-size: 1em;
	}
	
	#web-footer{
		display:none;
	}







#head .btn{
		display:inline-block;
		background : #F38181;
		border:none;
		color:white;
		padding:10px 15px;
		text-decoration: none;
		font-size: 10px;
		width : 50%;
	}
#head #bouton-log{
	display:none;
}

#bout-log li{
		width : 100%;
		background: transparent;
		text-align: center;
	}

#head .col-mobile{
		display: flex;
		align-items: center;
		background: transparent;
		text-align: right;
		margin-right:10px;
	}

#head .col-mobile .btn{
	width:100%;
}

#bout-log ul{
		list-style: none;
		grid-column : 2/span 3;
	}

 #bouton-log-mobile{
	width:10%;
}

#section-droite #reseaux-sociaux{
	display:none;
}

#actu,
#fiche{
		display:none;
	}

.bars-nouvelle{
	text-align: right;
	color : #9E9E9E;
	font-size: 7vw ;
	margin-right: 0 ;
	padding-right: 0 ;
}

#menu-mobile-nouvelle{
	display :grid;
	/*margin-bottom:10px;*/
}

#menu-mobile-nouvelle a{
	color : #9E9E9E;
}

#menu-mobile-nouvelle ul{
	list-style: none;
	display:flex;
	justify-content:space-around;
}
#menu-mobile-nouvelle li{
	display:flex;
	font-size: 4vw;
	font-weight: bold;
	color : #9E9E9E;
	text-align: center;
}



#image-actu-slide{
	display:none;
}


#slogan-nouvelle{
	font-weight: bold;
	font-size: 5vw;
	padding-bottom: 3vw;
}

#bouton-abonnement .btn{
	width:30%;
}


	.showcase .image{
		width:50%;
		min-width:50px;
		min-height: 50px;
	}

	
	.showcase .contenu{
		width:100%;
		min-width: 50px;
		text-align: left;
		max-height: 20vw;
		overflow: hidden;
		font-size: 2.5vw;
		line-height: 1em;
	}

	.showcase .image img,
	.top-box-a .section-bas .image img{
		width:90%;
		height:100%;
	}

	#btn-ancien{
		background :#0DEADA;
		width : 100px;
		font-size: 70%;
		font-weight: bold;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	.titre-actu{
		font-weight: bold;
	}
	.showcase ul li{
		display:flex;
	}

	.wrapper{
		margin-top:5px;
	}

	.showcase ul li .btn{
		width:100px;
		text-align: center;
		background:#317C41; 
	}

	.section-haut{
		display:none;	
	}

	.contenu p{
		padding:3px;
	}

	.wrapper{
		padding:10px;
	}

	
	#image-actu-slide .SlideImage img,
	#image-actu img{
		padding-top: 5px;
		width:80%;
	}

	.showcase{
		padding-left: 2vw;
		padding-right: 2vw;

	}

	#section-abonnement #bouton-abonnement #retour{
		display:none;
	}

	#actu #contenu-actu .SlideContenu{
		text-align: left;
		padding-left:10px;
		padding-right:10px;
		font-size: 3vw;
	}

	.col-bars{
		display:block;
		text-align:right;
		margin-top: 3vw;
	}

	#slogan-info{
		font-weight: bold ;
		color : white ;
		font-size : 3.8vw ;
		text-align: center ;
		line-height: 1.2em;
		padding-right: 10vw ;
	    padding-left: 10vw ;
	}
	
	#info {
		font-size: 3.05vmin;
		line-height: 1.1em;
		font-weight: 300 !important;
		color: white;
	}
	
	#menu-responsive{
		list-style: none;
		display:grid;
		grid-template-columns:1fr;
		padding-top: 20px;

	}
	#menu-responsive ul{
		list-style: none;
		background:transparent;
		display:flex;
		justify-content:space-around;
	}
	#menu-responsive li{
		background:transparent;
		font-size:3vw;
	}


	.liens{
		/*font-size : 8px;*/
		color:white;
		font-weight: bold;
		padding-top: 0px ;
	}

	.liens-actu{
		font-weight: bold;
		padding-top: 0px ;
	}

	.menu-hr{
		background-color: transparent;
		border : none;
		width : 5px;
		height : 5px;
		border-radius : 5px;
	}

	.bars-log{
		color : #ccc;
		font-size: 7vw ;
		margin-top:1vw;
		margin-right: 0px ;
		padding-right: 0px ;
	}
	#actu{
		text-align: right;
	}
	#actu .btn{
		background-color: #9E9E9E;
		width:10%;
		height:10px;
	}

	.hr-active{
		background-color: #0DEADA;
	}

	.item-active{
		color : #0DEADA;
	}

	.item-active-actu{
		color : #0DEADA !important;
	}

	#haut{
		display:grid;
		grid-template-columns:1fr;
	}
	#haut ul{
		list-style: none;
		display:flex;
		justify-content:space-around;
	}
	#haut li{
		width:20%;
	}

	.mySlides{
		width:100% ;
	}
	
	#fiche{
		margin-top:-40px;
	}

	.section-bas{
		display:grid;
		grid-template-columns:1fr;
	}

	.section-bas ul li{
		list-style: none;
		display:flex;
		justify-content:space-around;
	}

	#hr-bleu{
	 width:50%;
	 height:2px;
	 background-color:#0DEADA;
	 border:none ;
	 margin-top: 10px ;
}


	.titre-info{
		padding: 0px ;
		color : #000000 ;
		font-size: 18px;
		text-align: left;
		padding-left:20px; 
	}

	.nom {
		color: #0DEADA;
		text-align: center;
		font-weight: bold;
		padding-bottom: 0px;
		padding-top: 0px;
	}
	.titre-fonction {
		text-align: center;
		padding-bottom: 5px;
		padding-top: 0px !important;
	}

	.valeur-titre{
		font-weight: bold;
		text-align: center;
	}
	#equipe{
		padding-top:14vw !important;
	}
	#equipe,
	#valeur,
	#section-c,
	#section-d{
		display:grid;
		grid-template-columns :1fr;
		text-align: left;
		padding-left:3%;
		padding-right:3%;
		
	}

		

		#section-dev li ul li ul,
		#section-dev,
		#section-dev ul{
			list-style: none;
			display:grid;
			grid-template-columns:1fr;
			padding-top: 0px;
			padding-bottom: 0px;

		}

		#section-dev li ul{
			list-style: none;
			background:transparent;
			display:flex;
			justify-content:space-around;
		}

		#section-dev li ul li{
		width:100%;
		padding:10px;
		text-align: left;
		background:transparent;
	}
	#section-dev li {
		margin-bottom: 0px;
		padding-top: 3vw;
		padding-bottom: 3vw;
		padding-left: 2vw;
		padding-right: 2vw;
	}
		


		

		#section-dev .images{
			display:none;
		}

		#section-dev{
			font-size: 14px;
			color : #000000;
		}

		#section-dev button{	
			background-color : #FA8072;
			border:none;
			width:100%;
			height:30px;
			font-size: 100%;
			font-weight: bold;
			color:#fff;
		}

		#section-dev li ul li ul{
			padding-left:10vw;
		}
		#section-dev li ul li ul li{
			list-style: disc;
		}

		.titre-dev{
			color:white;
			font-size: 15px;
			font-weight: bold;
		}
		
		/* fiches logiciels */
		#fonctionnalite{
			display : grid ;
			grid-template-columns: 1fr;
		}
		#fonctionnalite div {
			padding-left: 1vw;
			padding-right: 1vw;
			text-align: justify;
		}
		
	#slidefiches{
		padding-top : 20px;
		display : grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
	
	#menufiches a{
		display : inline-block;
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.text {
		height: auto;
		padding: 20px;
		line-height: 1;
		font-size: 15px;
	}
	
	
	/*---------------logiciels----------------------*/
	.btn-accueil {
		min-width: 138px !important;
		font-size: 3vw;
		padding: 1vw 0 1vw 0;
		width: 45%;
	}
	/* -----------------contact ----------------*/
	form{
		padding-left:4vw;
		padding-right:4vw;
	}	
	
	#coordonnee{
		padding-left:4vw;
		padding-right:4vw;
		padding-bottom: 2vw;
	}
	
	/*----------------nouvelles--------------------*/
	#contenu-nouvelle{
		padding-left : 4vw;
		padding-right : 4vw;
		padding-top: 4vw;
	}
	
	#nouv h1{
		padding-top : 0px !important;
		padding-bottom : 0px !important;
	}
	
	.t-cadre {
		width: 100%;
		color: #333 !important;
		cursor: pointer;
		border: solid 1px #ccc;
		margin-top: 10px !important;
		padding: 0 !important;
		padding-bottom: 10px !important;
	}
	
	.t-cadre img{
		width:100%;
	}
	
	.t-cadre h4, .t-cadre h6 {
		font-weight: 300 !important;
	}
	.t-cadre h2, .t-cadre h3, .t-cadre h4, .t-cadre h6 {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	
	#section-evenement{
		padding-bottom : 4vw;
	}
	
	.actualite-contenu{
		font-size: 13px !important;
	
	}	
	
	#inscription-eve #form-contenu #libelle {
		display: none;
	}
	
	/*-----------------recrutement-------------------*/
	#recru{
		padding-left : 4vw;
		padding-right : 4vw;
		padding-bottom : 4vw;
	}
	
	#recrutementListe h2{
		padding-top : 0px !important;
		padding-bottom : 0px !important;
	}
	
	
	
	/*-----------------cgv-----------*/
	#cgv{
		width : 100% !important;
	}
	
	#cgv li {
		margin-left: 7vw !important;
	}
	
	
	#menu-mobile{
		position : absolute !important;
		z-index : 1 !important;
		background-color : #19B2B8;
		padding:25px 15px 5px;
		margin-bottom:5px;
		width:100%;
	}
	
	#menu-mobile ul{
		margin : 0 !important;
		padding: 0 !important;
	}
		
	#menu-mobile li{
		background-color : #19B2B8 !important;
		margin : 0 !important;
		padding: 0 !important;
	}

	#menu-mobile li a{
		color: white !important;
		display : block;
		text-align:left;
		padding:10px 0 3px 0;
		border-bottom:1px solid #f0f8ff21;
		
	}
		
	#section-actualite img{
		width : 100% !important;
	}
	
	p{
		text-align :justify !important;
	}
	
	.formulaire-mobile{
		display:block !important;
	}
	
	.formulaire-web{
		display:none !important;
	}
	
	/*---------------------------------a propos------------------------*/
	#valeur h3{
		font-size: 15px !important;
		font-weight: 500 !important;
	}
	
	#equipe {
		padding-top:14vw;
	}
	
	
	/*-----------------------------fiches logiiels---------------------------*/
	#contenu-fiches {
		padding-left: 2vw;
		padding-right: 2vw;
	}
	#contenu-fiches h1{
		font-size : 1.8em !important;
		padding : 0 !important;
	}
	#contenu-fiches h2{
		font-size : 1.6em !important;
	}
	#contenu-fiches h3{
		font-size : 1.4em !important;
	}
	#contenu-fiches h4{
		font-size : 1.2em !important;
	}
	#contenu-fiches h5{
		font-size : 1em !important;
	}
	#contenu-fiches h6{
		font-size : 0.8em !important;
	}
	
	.logo-cote {
		padding-top: 20%;
		width: 10vw !important;
		min-width: 0px !important; 
	}
	
	.logo-courant {
		width: 23vw;
		min-width: 73px;
		max-width: 120px;
	}

	th {
		font-size: 17px !important;
	}
	
	td {
		font-size: 15px !important;
	}
	
	.btn-tarif {
		font-size: 15px !important;
		width: 19vw;
		max-width: 75px;
	}
	
	.text {
		padding: 0px !important;
		line-height: 1.5 !important;
		font-size: 15px !important;
	}
	.btn-fiches {
		width: 48vw;
		max-width: 200px;
		font-size: 14px;
		background-color: #318CE7;
	}
	.neutre .btn-fiches {
		margin-bottom: 20px;
		width: 29vw !important;
	}
	
	#fonctionnalite div {
		padding-left: 5vw;
		padding-right: 5vw;
		text-align: justify;
	}
	
	.developpement-contenu {
		font-size: 14px !important;
	}
	
	.fiche-une img{
		width:100%;
	}
	
	/*------------------------------scolaris-------------------------------------------*/
	.scolaris-haut img{
		width:66% !important;
	}
	
	.scolaris li{
		width:96% !important;
		padding-left : 2vw !important;
		padding-right : 2vw !important;
	}
	
	.scolaris-haut .titre-slogan p{
		text-align:center !important;
	}

	#partie-EC{
		width:100% !important;
	}

	.partie-boutonEC{
		width:80%;
		margin:1vw auto;
		display:grid;
		
	}

	.partie-boutonEC div{
		width:100% !important;
	}
	.bouton-gros{
		padding: 2vw 0px;
	}

	.nouveau-accueil li {
	    width: 100% !important;
	}

	/*-------------------references clients---------------------*/
	.flex-references{
		width:48%;
	}

	/*-------------------------page coordonnées--------------------*/
	.content-coordonnees{
		width:80% !important;
	}

	.nouveau-gabarit-fiche{
		padding-top:2vw;
		column-count: 1;
	}

	#equipe li {
	    margin-top: 5vw;
	}

	.titre-fonction p {
	    text-align: center !important;
	}

	.scolaris img{
		width:70%;
	}
	
	.nouveau-gabarit-fiche img{
	    width:100% !important;
	}

	#carre-parent{
		display:none !important;
	}
	#carre-parent-mobile{
		display:block !important;
	}

	.bouton-accueil-double{
		font-size:3.5vw !important;
	}

	.ctn-accueil{

		padding-bottom: 4vw !important;
	}

	.t-cadre-technologie{

	    width: 100% !important;
	    padding: 3vw !important;
	    margin-top:5vw !important;

	}

	.t-cadre-externalisation{

		width: 96%;
		margin-bottom:4vw;
	}


	.img-ref-externalisation{

		float:none;
	}

	#logo-cache{

		display:none;

	}

	.t-cadre-realisation{

		width: 100%;
	
	}

	.menu-actif{

		display: flex;
		justify-content: space-between;

	}

	#liste-menu-principal{

		width:95%;
		flex-wrap:wrap;

	}

	.menu-actif .affiche-liste-menu{

		display:block !important;

	}

	#titre-site{

		font-size: 3.5vw; 
		font-weight:normal;

	}

	.texte-illustration{

		font-size:2.5vw;

	}

	.main-accueil-site{

		margin-top:-12vw !important;

	}

	.doublure-en-tete{

		height: 21vw;
		min-height: 90px;
		max-height: 167px;
		
	}

	#menu-statique{

		display:flex !important;
	}

	#case1:before,
	#case2:before,
	#case3:before{

		display:none;

	}

	#parent-case1,
	#parent-case2,
	#parent-case3{

		border-radius:0px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

	}

	#parent-case1,
	#parent-case3{

		flex-direction: column-reverse !important;

	}

	#parent-case1{

		margin-top:3vw;
	}


	#parent-case2{

		flex-direction: column !important;

	}

	.case-rouge{

		border-bottom-right-radius: 0px !important;
		border-top-left-radius: 0px !important;
		border-top-right-radius: 0px !important;
		border-bottom-left-radius: 0px !important;
	}
	
	#parent-case1 div:first-child,
	#parent-case2 div:last-child,
	#parent-case3 div:first-child,
	#case1,
	#case2,
	#case3{

		width:100% !important;
		height:auto !important;
		padding:0px;
	}

	#parent-case1 div > div,
	#parent-case2 div > div,	
	#parent-case3 div > div{

		padding:2vw !important;
	}

	#section-question .cont-img{

		float:right !important;

	}

	#section-solution .cont-img{

		float:left !important;
		
	}

	.contenu-section-floating{

		display:block !important;
	}

	#section-question,
	#section-solution{

		display:block;

	}

	.div-moitier,
	.div-tier,
	.div-quart{

		width:100%;

	}

	.section-intro div{

		width:100% !important;

	}

	.t-cadre-audit{

	    width: 100%;

	}

	.t-cadre-number-left{

		width: 35%;

	}

	.t-cadre-number-right{

		width: 35%;

	}


	.t-cadre-texte{

		padding: 2vw;

	}

	.div-parent-fleche{

		width: 100%; 
	
	}

	.div-fleche-droite:before,
	.div-fleche-gauche:before,
	.div-fleche-droite:after,
	.div-fleche-gauche:after{

	    border-top:76px solid transparent;
	    border-bottom:76px solid transparent;
	}

	.div-fleche-droite,
	.div-fleche-gauche{

		height:152px;
		top:13px;

	}

	.div-contenu-fleche{

		width:calc(100% - 135px);
		height:160px;
		padding:16px 0 0 25px !important;
	}

	.div-contenu-fleche:after {

	    border-top: 88px solid transparent;
	    border-bottom: 88px solid transparent;
	    margin-top: -15px;
	    padding:0 0 0 25px !important;
	    margin-right:-55px;

	}

	.section-intro{

		flex-wrap: wrap;

	}

	.section-intro .cont-img img{

		width:200px !important;
	}

	.contenu-section-floating{

		width:100% !important;

	}

	.div-contact{

		flex-wrap: wrap;
		justify-content: space-around;
	}

	.div-partie-contact{

		width:100% !important;
		margin-bottom:20px;

	}

	.img-centree{

		width:250px !important;
		margin:15px auto;
	}

	.div-formation-left p:first-child{

		text-align: left !important;
	}

	.div-formation {

		width : 100% !important;
		float:left !important;

	}

	.div-formation-left{

		padding-right:0px !important;
		border-right: none !important;
		margin-left: 0px !important;

	}

	.div-formation-right{

		padding-left:0px !important;
		border-left: none !important;
		margin-right: 0px !important;

	}

	.point{

		float: left !important;
		padding-top: 19px !important;
		margin-left: 0px !important;
		margin-right: 0px !important;
		padding-left: 0px !important;
		padding-right: 5px !important;

	}

	.point div {

	    width: 16px;
	    height: 7px;
	    border-radius: 16px;
	}

	#map-image{

		width:100% !important;

	}

	.cadre-individuel-realisation{

		width: 48%;
		min-width:300px;

	}

	#liste-realisations{

		justify-content: center; 

	}

	.cadre-contenu-realisation h5{

		padding-bottom :30px !important; 

	}

	.contenu-actu-realisation,
	.photo-actu-realisation{

		width:100% !important;
		padding:0px !important;
	}
}

@media(max-width : 1000px){

	#img-deco{

		display:none;

	}

	.mth{

		position:initial;

	}

	#container-methode{

		width:100%;

	}

	.div-contact{

		flex-wrap: wrap;
		justify-content: space-around;
	}

	.div-partie-contact{

		width:100% !important;
		margin-bottom:20px;
		justify-content: left !important;

	}

	.detail-realisation{

		flex-wrap:wrap;

	}

	.contenu-actu-realisation,
	.photo-actu-realisation{

		width:100% !important;
		padding:0px !important;
	}

	#btnWeb{

		display:none;

	}

	#btnMobile{

		display:block;
		
	}
}