@media screen and (max-width:1370px) and (min-width:801px){
	body{
		font-size: 16px;
		line-height : 1.5 !important;
	}

	/*en-tete*/
	#head{
		color:#000;
	}
	
	#headstandard{
		min-height: 200px;
	}

	#bg-image {
		position: absolute;
		background-color: #9E9E9E;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
		height: 55vw;
		min-height: 479px;;
		max-height: 679px;
		z-index: -1;
	}
	
	#section-dev .images{
			display:block;
		}

	.menu-noir{
		color:#fff;
	}
	

	.card-content{
		padding:1.5em;
	}

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

	#head #en-tete ul{
		list-style: none;
		padding-top:5px;
		padding-bottom:0px;
	}

	#head #en-tete ul li ul{
		list-style: none;
		padding-top:0px;
	}

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

	

	#logo-manao{
		height: 6vw;
		width: 15vw;
		float : left;
		padding-top: 10px;
		padding-left: 10px;


	}

	#head .col-mobile{
		display:none;
	}

	#actu #contenu-actu .SlideContenu{
		text-align: left;
		font-size: 16px;
		padding-left:30px;
		padding-right:30px;

	}

	#head #en-tete,
	#head #en-tete li{
		color:white;
		display : block;
		background-color: #393E46 ;
		padding:0 ;
		margin:0 ;
		font-size:12px;
	}

	.icon-search{
		color:#EEEEEE ;
	}

	.m-principal{
		display:block;
	}

	.menu-principal{
		text-decoration:none;
		font-size : 20px;
		font-weight: bold;
		color:white;
	}

	.hr-underline{
		background-color:#53bae9;
		border:none;
		width:70%;
		height:3px;
		margin-top: 0px;
		margin-bottom : 10px;
		border-radius:5px;

	}
	#search-bar{
		width: 20vw ;
		height :15px ;
		margin-left: 3px;
		border-top-right-radius: 10px ;
		border-bottom-right-radius: 10px ;
		border:none ;
		background-color: #EEEEEE ;
	}

	#head #bouton-log{
		display:inline-block;
	}
	.contact{
		color : white;
		margin-right: 1vw;
		margin-top: -15px;
	}

	#head #menu li{
		background : transparent;
		text-align: center;
	}


	#web-footer .logo-manao-pied{
		padding : 1em 1em;
		width: 150px;
		opacity:2.5;
	}

	#bloc .content-title {
		font-size: 30px;
		font-weight: bold;
		padding-top: 1vw;
	}
	
	#gestion p,
	#rh p,
	#vente p,
	#service p{
		font-size : 16px;
	}

	.card .card-text {
		min-height: 108px;
		color: #333;
	}
	
	#gestion .card .card-logo,
	#rh .card .card-logo,
	#vente .card .card-logo,
	#service .card .card-logo{
		min-height: 10%;
	}
	#info img{
		width :75%;
	}
		
	#head #en-tete ul,
	.content-wrap,
	#gestion ul,
	#rh ul,
	#vente ul,
	#service ul,
	#bloc .content-wrap,
	#bloc-confiance ul,
	#web-footer ul,
	#head #menu ul,
	#head #menu ul .m-principal ul,
	#nouvelle ul{
		list-style: none;
		grid-column: 1/span 5;
	}

	#bout-log ul{
		list-style: none;
		grid-column : 2/span 3;
	}
	
	#bloc .content-text {
		color: #2ac5ba !important;
		font-weight: 700;
		padding-top: 1vw;
		padding-bottom: 10px;
		font-size: 18px;
		padding-right: 2vw !important;
		padding-left: 2vw !important;
	}

	
	#head #en-tete ul,
	#head #menu ul,
	#bout-log ul,
	#gestion ul,
	#rh ul,
	#vente ul,
	#service ul,
	#bloc-confiance ul,
	#web-footer .content-wrap ul,
	#nouvelle ul{
		list-style: none;
		display : flex;
		justify-content: space-around;
	}

	#head #menu .m-principal li{
		width:25%;
	}


	#nouvelle ul li ul{
		list-style: none;
		display:grid;
		grid-template-columns : 1fr;
	}

	#nouvelle #section-droite p{
		text-align: left;
		font-weight: bold;
		font-size: 16px;
	}

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

	#head #en-tete li,
	#gestion li,
	#rh li,
	#vente li,
	#service li{
		width : 32%;
		grid-column-gap:0px;
	}

	.m-principal{
		padding-top: 4.8vw;
	}

	#gestion .card{
		background : #FFF59D;
	}

	#rh .card{
		background : #BDE4F4;
	}

	#vente .card{
		background : #A0E4B0;
	}

	#service .card{
		background : #F09872;
	}

	#bloc-confiance{
		display:block;
		text-align: left;
		padding-bottom: 20px; 
	}
	#bloc-confiance p{
		padding-left:10px;
		text-align: left;
		font-size: 16px;
		font-weight: bold;
	}

	#bloc-confiance .pays{
		text-align: center;
		font-size : 16px;
	}

	#bloc-confiance img{
		width:100%;
		-webkit-filter: grayscale(100%); 
    	filter: grayscale(100%);
	}

	#bloc-confiance li,
	#bloc-confiance hr{
		width:50%;
	}

	#bloc-confiance a{
		text-decoration: none;
		font-style: italic;
		text-align: left;
		padding-left:10px;
		color:#000;

	}

	#slogan {
		height: 43.5vw !important;
		min-height: 355px;
		max-height: 545px;
	}
	
	#slogan .titre-slogan {
		font-size: 3.6vw;
		word-spacing: 5px;
		line-height: 1.5em;
		margin-bottom: 0px;
		padding-top: 1.5vw;
	}

	#web-footer,
	#web-footer a{
		display:block;
		background: #393E46;
		color: #fff;
		font-size : 16px;
		text-align: left;
	}

	#web-footer li{
		background: #393E46;
		color:#fff;
		padding : 30px;
		width : 33%;
	}


	#mobile-footer{
		display:none;
	}

	#web-footer .icon-pied{
		font-size: 50px ;
		color:#9E9E9E;
		background:#393E46;
		padding:0;
	}

	#web-footer .titre{
		font-size: 25px;
		font-weight: bold;
	}

	#web-footer .content-wrap{
		padding-left : 2%;
		padding-right : 2%;
	}

	#web-footer .bureau{
		font-weight: bold;
		font-size: 18px;
	}

	#fiche{
		color: black;
		display :none;
	}

	/*actualités*/

	#nouvelle{
		display : inline-block;
	}
	#nouvelle #section-gauche{
		width : 90%;
		grid-column-gap:0px;
	}

	#nouvelle #section-droite{
		width : 10%;
		grid-column-gap:0px;
	}

	.bars-nouvelle{
		display:none;
	}
	#image-actu{
		display:flex;
		justify-content:space-around;
		margin-top : 3vw;
		margin-bottom:2vw;
		width:100%;
		height:36vw;
		min-height: 400px;
		text-align: center;
	}

	#image-actu img{
		width:70%;
	}

	#image-actu-slide{
		display:none;
		margin-top : 3vw;
		margin-bottom:2vw;
	}

	#image-actu-slide .SlideImage img{
		padding-top: 5px;
		height: 400px;
		width: 600px;
	}	

	#slogan-nouvelle{
		font-weight: bold;
		font-size: 20px;
	}

	#bouton-abonnement{
		padding-top: 10px;
	}
	#bouton-abonnement .btn{
		width:10%;
		height:20px;
	}

	#section-droite #reseaux-sociaux{
		display:block;
	}
	/*#section-gauche{
		display : grid;
		grid-template-columns : 1fr 1fr 1fr 1fr 1fr;
	}*/
	#main{
		display : grid;
		grid-template-columns : 1fr;
	}

	#recru ul{
		list-style: none;
		display : flex;
		justify-content: space-around;
		padding-top: 2vw;
		width : 70%;
		column-gap: 10px;
	}

	#recru li{
		/*background:#0DEADA;*/
		width:33%;
		
		
	}

	.card-recru{
		height:100px;
		border : solid;
		border-color:#CECECE;
	}
		
	
	
	
	.showcase .image{
		width:100%;
		min-width:300px;
		min-height: 100px;
	}

	.top-box-a .section-bas .image{
		width:100%;
		min-width:130px;
	}
	

	.showcase .contenu{
		width:100%;
		min-width: 135px;
		text-align: left;
		max-height: 230px;
		overflow: hidden;
		font-size : 16px;
		line-height: 1.5em;
	}
	.showcase .image img,
	.top-box-a .section-bas .image img{
		width:90%;
		height:100%;
	}


	#btn-ancien{
		background :#0DEADA;
		width : 150px;
		font-size: 100%;
		font-weight: bold;
		margin-top: 50px;
	}
	.titre-actu{
		font-weight: bold;
	}

	.wrapper{
		margin-top: 50px;
		margin-bottom: 25px;
		display: grid;
		width:100%;
	}
	

	#top-container {
		display : grid;
		grid-template-areas:
			'showcase top-box-a';
			color:black;
	}

	.showcase{
		grid-area: showcase;
		padding: 0px;
	}

	.showcase ul li .contenu,
	.top-box-a .section-bas ul li .contenu{
		text-align: left;
		padding:0px;

	}
	.showcase ul li .contenu .contenu-actu{
		max-height: 100px;
		margin-bottom:10px;
		overflow: hidden;
	}
	
	.top-box-a .section-bas ul li .contenu{
		min-height:100px;
	}
	.showcase ul li .btn{
		width:100px;
		text-align: center;
		background:#317C41; 
	}
	.showcase ul li,
	.top-box-a .section-bas ul li{
		display:grid;
		grid-template-columns:1fr 3fr;
	}

	.top-box-a{
		padding-left: 50px;
		grid-area: top-box-a;
		text-align: left;
		min-width:30px;
	}
	.top-box-a .titre{
		font-size: 18px;
		font-weight: bold;
		padding:20px;
	}

	.section-bas{
		padding: 0px;
	}

	.section-haut{
		display:block;
	}

	#actu{
		display:none;
	}

	#menu-mobile-nouvelle{
		display :none;
	}

	.ligne-slide{
	padding-top: 3vw ;
	width :100% ;
	}
	#fleche-gauche-cache{
		display : none;
		/*padding-left: 25px ;*/
	}
	.fleche-left{
		cursor:pointer;
		color : #CECECE ;
		font-size: 10vw ;
		text-align: left;
	}
	.mySlides {
		width:18vw;
		min-height: 0px ;
	}

	.fleche-right{
		cursor:pointer;
		color : #CECECE ;
		font-size: 10vw ;
		text-align: right;
	}
	#fleche-droite-cache{
		display : none;
	}

	.mySlidesPrevious {
		padding-top: 60%;
		width:40%;
		min-width:80px;
	}

	.mySlidesNext {
		padding-top: 60%;
		width:40%;
		min-width:80px;
	}

	.mySlidesArt {
		margin: 0 ;
		padding:0 ;
		color:black ;
	}

	.badge {
		display : inline-block ;
		cursor:pointer;
		height:13px;
		width : 13px;
		margin-top:0px;
		background-color: #CECECE;
		border-radius: 9px ;
		border :solid ;
		border-width: 3px ;
		border-color: #CECECE ;
		position: middle ;
	}

	.badge:hover{
		background-color : white;
		border-color: #CECECE ;
	}
	.active{
		background-color : white;
		border-color: #CECECE ;
	}

	#haut,
	#bas{
		display:grid;
		grid-template-columns :1fr;
	}

	#bas{
		background-color: transparent;
		margin-top:-20px;
		z-index: -1;
	}

	#haut ul,
	#bas ul{
		list-style: none;
		display:flex;
		justify-content:space-around;
	}

	#haut li,
	#bas li{
		width:30%;
		text-align: center;
	}

	.col-bars{
		display:none;
	}

	#menu-responsive{
		list-style: none;
		display:grid;
		grid-template-columns:1fr;
		padding-top: 0px;
	}

	#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;

	}
	
	#menu-responsive ul,
	#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 ul li img{
		width:80%;
		min-width: 350px;
	}
	#menu-responsive li{
		background:transparent;
		font-size: 1.8vw;
	}

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

	.liens{
		font-size : 20px;
		color : white;
		font-weight: bold;
		padding-top: 0px ;
		/*margin-bottom: 40px ;*/
	}

	
	#section-dev li{
		margin-bottom:0px;
		padding-top:3vw;
		padding-bottom:3vw;
		padding-left: 6vw;
		padding-right : 6vw;
	}


	.titre-dev{
		padding-top: 22px;
		padding-bottom: 10px;
		color:white;
		font-size: 22px;
		font-weight: bold;
	}

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

	#section-dev button{	
		background-color : #FA8072;
		border:none;
		width:250px;
		height:40px;
		font-size: 100%;
		font-weight: bold;
		color:#fff;
	}
	
	#section-dev li ul li ul{
		padding-left:3vw;
	}
	#section-dev li ul li ul li{
		list-style: disc;
	}
	
	#slogan-info{
		font-weight: bold ;
		color : white ;
		font-size : 5vw;
		text-align: center ;
		padding-top: 50px ;
		padding-bottom: 0px ;
		line-height: 1.2em;
	}

	#info {
		text-align: center;
		color: white;
		font-weight: normal;
		font-size: 1.8vw;
		padding-left: 3vw;
		padding-right: 3vw;
		line-height: 1.5em;
	}
	
	
	/*----------------------recrutement-----------------*/
	#recrutementListe {
		display: grid;
		grid-template-columns: 1fr;
		padding-left: 2vw;
		padding-right: 2vw;
		padding-top: 2vw;
		padding-bottom: 2vw;
	}
	
	#recrutementListe .offres{
		/* display: flex; */
		/* flex-direction: row; */
		/* justify-content: center; */
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		align-items: center;
		margin-bottom : 10px;
	}
	
	.t-cadre{
		width:90%;
		color:#333 !important;
		cursor:pointer;
		border : solid 1px #ccc;
		margin:10px;
		padding:0 !important;
	}
	
	.t-cadre a {
		padding:0;
		margin : 0;
		display:block;
		text-decoration:none;
		color:#333 !important;
	}
	
	.t-cadre img{
		width: 100% !important;
		height :100%;
		position:relative;
		z-index:-1;
		margin:0 !important;
	}
	
	.t-cadre h3{
		display:block;
	}
	
	
	
	

	.titre-info{
		color : #000000 ;
		font-size: 24px;
	}

	.nom{
		color : #0DEADA ;
		font-weight: bold;
		padding-bottom: 0 !important;
	}
	.titre-fonction{
		padding-bottom: 30px;
		padding-top: 0 !important;
		padding-left: 3vw;
		padding-right: 3vw;
	}

	.valeur-titre{
		font-weight: bold;
		text-align: center;
	}
	
	

	#hr-bleu{
		 width:50%;
		 height:2px;
		 background-color:#53bae9;
		 border:none ;
	}

	#equipe,
	#valeur,
	#section-c{
		display:grid;
		grid-template-columns :1fr;
		text-align: left;
		padding-left: 4%;
		padding-right: 4%;
	}



	#equipe ul,
	#valeur ul,
	#section-c ul{
		list-style: none;
		display:flex;
		justify-content:center;
		flex-wrap: wrap;
	}

	#equipe li,
	#valeur li,
	#section-c li{
		width:33%;
		
	}

	.contenu-info{
		padding-left: 20px;
		padding-right: 20px;
	}


	#actu{
		text-align: right;
		margin-bottom: 20px;
	}

	#actu .btn{
		text-align: center;
		background-color: #CECECE;
		width:10%;
		margin-right: 2%;
		font-weight: bold;
	}

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

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

	#fiche{
		margin-top:0px;
	}

	#section-d ul{
		list-style: none;
		display:flex;
		justify-content:space-around;
	}

	#section-d li{
		width:50%;
	}

	#formulaire{
		margin-top:5vw;
		margin-bottom:2vw;
		display:grid;
		grid-template-columns: 1fr;
	}

	#formulaire ul{
		list-style: none;
		display:flex;
		justify-content: space-around;
	}

	#formulaire li{
		text-align: left;
		width:45%;
	}

	#formulaire li ul li{
		text-align: left;
		width:48%;
	}

	#contact,
	#adresse{
		display:grid;
		grid-template-columns:1fr;
	}

	

	#adresse li{
		width:40%;
	}

	#adresse li p{
		font-size:16px !important;
		text-align: left;
	}

	#contact li{
		width:60%;
	}

	#recrutementListe{
		display:grid;
		grid-template-columns: 1fr;
		padding-top : 1vw;
	}

	#recrutementListe img{
		width:100% ;
		height : auto;
	}

	#recrutementListe .title-poste{
		color:#0DEADA; 
		font-weight:bold; 
		font-size:20px;
	}

	#recrutementListe .btn{
		width:100px ;
		background: #0DEADA;
		height : auto;
		text-align:center;
		font-size:12px;
		height: 15px;
		padding:5px !important;
	}  
	#recrutementListe ul{
		list-style: none;
		width:100%;
		display:grid;
		grid-template-columns: 1fr;
	}

	
	#recrutementListe li{
		width:100%;
		display:grid;
		grid-template-columns: 1fr;
		text-align: left;
	}

	#recrutementListe ul li ul{
		display:flex;
		grid-template-columns: 1fr;
	}

	#recrutementListe ul li ul li:first-child{
		width:50%;
		display:grid;
		grid-template-columns: 1fr;
		text-align: left;
	}

	#contenu-nouvelle,
	#section-actualite,
	#contenu-eve{
		display:flex;
		justify-content: space-around;
	}

	#contenu-nouvelle #nouv{
		width: 95%;
		display : flex;
		justify-content:space-around;
		padding-top: 2vw;
		padding-bottom: 2vw;
	}

	#section-actualite{
		display :grid;
		grid-template-columns:1fr;
		width:65%;
	}
	#section-evenement{
		width : 30%;
	}

	#contenu-nouvelle h1,
	#contenu-nouvelle h2,
	#contenu-nouvelle h3{
		color: #333;
	}

	#nouv h1{
		padding-top:25px !important;
		padding-bottom:15px !important;
	}
	#liste h2{
		padding-top:0px !important;
	}

	#liste-autre-actu{
		display : grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-column-gap: 5px;
	}

	#nouv img{
		width : 100%;
	}

	#liste-autre-actu img{
		height : 150px;
	}

	#contenu-eve img{
		width : 40%;
		height : 100px;
	}
	
	h2, h3 {
		color:#333 !important;
	}
	
	.t-cadre{
		width:98%;
		color:#333 !important;
		cursor:pointer;
		border : solid 1px #ccc;
		margin:10px;
		padding:0 !important;
	}
	
	.t-cadre a {
		padding:0;
		margin : 0;
		display:block;
		text-decoration:none;
		color:#333 !important;
	}
	
	.t-cadre img{
		width: 100% !important;
		height :100%;
		position:relative;
		z-index:-1;
		margin:0 !important;
	}
	
	.t-cadre h3{
		display:block;
	}
	
	
	/* fiches logiciels */
		
	#fonctionnalite{
		display : grid ;
		grid-template-columns: 1fr 1fr;
	}
	
	#fonctionnalite div{
		padding-left : 8vw;
		padding-right : 1vw;
	}	
		
	#slidefiches{
		display : grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
	
	#menufiches a{
		display : inline-block;
		padding-left: 20px;
		padding-right: 20px;
	}
	.btn-accueil {
		width: 34%;
		max-width: 327px;
		font-size: 2vw;
	}
	
	/*---------------------------actualite-----------------------------------*/
	.actualite-contenu iframe {
		width: 100%;
		height: 34vw !important;
	}
	
	#section-actualite .btn {
		width: 200px !important;
		background-color: #0ceadb !important;
		font-size: 20px;
		color: #333;
		font-weight: 500 !important;
		cursor : pointer;
	}
	
	#section-actualite .btn:hover {
		background-color: #60ced9 !important;
	}
	
	#section-actualite #form-contenu{
		display : flex;
		justify-content:space-around;
	}
	
	#section-actualite #form-contenu #libelle{
		width : 50%;
	}
	
	.actualite-contenu .colonne-actu{
		display : grid;
		grid-template-columns : 1fr 1fr;
	}
	
	.actualite-contenu .colonne-actu div{
		padding: 1vw !important;
	}
	
		
		
	/*-------------------------------a propos -------------------*/
	#valeur h3,
	#valeur h4{
		font-weight:100;
	}	
	
	#valeur h4 {
		padding-top: 0px !important;
		padding-left: 6%;
		padding-right: 6%;
		text-align: justify!important;
	}
	
	
	.titre-slogan-centre{
		padding-top: 8vw !important;
	}
	
	
	/*--------------------------fiches------------------------*/
	.developpement-contenu .btn{
		margin-top : 2vw !important;
	}
	
	/*-----------------------recrutement--------------------------*/
	#recrutementListe p{
		padding-top:10px !important;
		font-size : 20px !important;
	}
	
	#recrutementListe i{
		font-style : italic !important;
	}
	
	
	/*-----------------------------logiciels--------------------------*/
	#bloc-confiance img:hover{
		-webkit-filter: grayscale(0%) !important;
	}
	
	/*-----------------------------scolaris-----------------------------*/
	.scolaris-haut img{
		width:55% !important;
	}
}