@media (pointer:coarse) {

  div#nav li#npmenugal{
  	display: inline-block;
	}

}


@media screen and (max-width:800px) {

	.l-1 {flex: 0 0 8.3333%; max-width: 8.3333%;}
	.l-2 {flex: 0 0 16.6666%; max-width: 16.6666%;}
	.l-five {flex: 0 0 20%; max-width: 20%;}
	.l-3 {flex: 0 0 25%; max-width: 25%; :25%;}
	.l-4 {flex: 0 0 33.3333%; max-width: 33.3333%; }
	.l-5 {flex: 0 0 41.6666%; max-width: 41.6666%; }
	.l-6 {flex: 0 0 50%; max-width: 50%; }
	.l-7 {flex: 0 0 58.3333%; max-width: 58.3333%; }
	.l-8 {flex: 0 0 66.6666%; max-width: 66.6666%; }
	.l-9 {flex: 0 0 75%; max-width: 75%; }
	.l-10 {flex: 0 0 83.3333%; max-width: 83.3333%; }
	.l-11 {flex: 0 0 90%; max-width: 90%; }
	.l-12 {flex: 0 0 100%; max-width: 100%; }

	.s-1 {flex: 0 0 8.3333%; max-width: 8.3333%;}
	.s-2 {flex: 0 0 16.6666%; max-width: 16.6666%;}
	.s-five {flex: 0 0 20%; max-width: 20%;}
	.s-3 {flex: 0 0 25%; max-width: 25%; :25%;}
	.s-4 {flex: 0 0 33.3333%; max-width: 33.3333%; }
	.s-5 {flex: 0 0 41.6666%; max-width: 41.6666%; }
	.s-6 {flex: 0 0 50%; max-width: 50%; }
	.s-7 {flex: 0 0 58.3333%; max-width: 58.3333%; }
	.s-8 {flex: 0 0 66.6666%; max-width: 66.6666%; }
	.s-9 {flex: 0 0 75%; max-width: 75%; }
	.s-10 {flex: 0 0 83.3333%; max-width: 83.3333%; }
	.s-11 {flex: 0 0 90%; max-width: 90%; }
	.s-12 {flex: 0 0 100%; max-width: 100%; }

	img#thetitle{
	  width: 450px;
	  float: none;
	}

	h2#nptitleactu{
	  margin:0 0 20px 0;
	}
	#npfirst .homeArtiBox{
	  padding:  0 20px 24px 20px;
	}

	#npPlugAgendNum2{
	  display: block;
	}
	#npPlugAgendNum1{
	  display: none;
	}

	#npPlugAgendNum2 ul{
		margin: 20px;
	}

	div#nav li:hover ul.npsubmenu{
	  display: none;
	}

	
	
}

@media screen and (min-width:801px) {
	.s-1 {flex: 0 0 8.3333%; max-width: 8.3333%;}
	.s-2 {flex: 0 0 16.6666%; max-width: 16.6666%;}
	.s-five {flex: 0 0 20%; max-width: 20%;}
	.s-3 {flex: 0 0 25%; max-width: 25%; :25%;}
	.s-4 {flex: 0 0 33.3333%; max-width: 33.3333%; }
	.s-5 {flex: 0 0 41.6666%; max-width: 41.6666%; }
	.s-6 {flex: 0 0 50%; max-width: 50%; }
	.s-7 {flex: 0 0 58.3333%; max-width: 58.3333%; }
	.s-8 {flex: 0 0 66.6666%; max-width: 66.6666%; }
	.s-9 {flex: 0 0 75%; max-width: 75%; }
	.s-10 {flex: 0 0 83.3333%; max-width: 83.3333%; }
	.s-11 {flex: 0 0 90%; max-width: 90%; }
	.s-12 {flex: 0 0 100%; max-width: 100%; }

	.l-1 {flex: 0 0 8.3333%; max-width: 8.3333%;}
	.l-2 {flex: 0 0 16.6666%; max-width: 16.6666%;}
	.l-five {flex: 0 0 20%; max-width: 20%;}
	.l-3 {flex: 0 0 25%; max-width: 25%; :25%;}
	.l-4 {flex: 0 0 33.3333%; max-width: 33.3333%; }
	.l-5 {flex: 0 0 41.6666%; max-width: 41.6666%; }
	.l-6 {flex: 0 0 50%; max-width: 50%; }
	.l-7 {flex: 0 0 58.3333%; max-width: 58.3333%; }
	.l-8 {flex: 0 0 66.6666%; max-width: 66.6666%; }
	.l-9 {flex: 0 0 75%; max-width: 75%; }
	.l-10 {flex: 0 0 83.3333%; max-width: 83.3333%; }
	.l-11 {flex: 0 0 90%; max-width: 90%; }
	.l-12 {flex: 0 0 100%; max-width: 100%; }
}

@media screen and (max-width:500px) {

	img#thetitle{
	  width: 300px;
	  float: none;
	}

	button#npBtViewPrevEvent{
		width: auto;
		padding:10px;
	}

	button#npBtViewNextEvent{
		width: auto;
		padding:10px;
	}

}

.flex{
	display: flex;
    flex-wrap: wrap;
    width: 100%;
}

iframe[src*='youtu'], iframe[src*='vimeo']{
	width: 100%;
	max-width: 640px;
}