@charset "utf-8";
/* CSS Document */
@media only screen 
and (max-width : 768px) {
/*and (orientation: portrait) {*/
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');
	#FondDuSite{
		height:auto;
		margin:0px;
		width:100%;
	}
	#LayerBanner{
		font-size:36px;
		/*font-weight:bold;*/
		left:35px;
		background-image:url('/images/bear-transp37x30-Y2.png'); 
		background-repeat:no-repeat;
		/*background-size:15%;*/
		width:90%;	
		/*height:1.7em;*/
		height:65px;
		/*opacity:.99; /*pour que Lang soit cliquable*/
	}
	@media (max-width : 320px) {
		#LayerBanner{
			background-image:url(''); 
		}
	}
	#LayerBanner .com {
		font-size:18px;
	}
	#LayerMenuButton, #LayerMenuShadow, #LayerPartage, #LayerSummary, #LayerSummary2Container, #LayerSummary3Container, #LayerSummary4Container, #LayerSummary2, #LayerSummary3, #LayerSummary4, #slides, #output, #EspaceSousBanner2, #LayerCorpsW3C, #QRcode, #TagCloud, .DeskTop, #LayerMenu, .BoutAgrand_map{
	 	display:none;
	}
	#EspaceSousBanner1 {
	
	}
	#LayerLang {
		/*margin-top:-18px;
		margin-right:-20px;
		/* DEBUT pour que Lang soit cliquable*/
		position:absolute;
		left:50%;
		top:90px;
		/* FIN pour que Lang soit cliquable*/
	}
	#LayerMenu, #LayerMenuButton{
		width:0px;
		height:0px;
	}
	/*#MenuMobileOnOff, */
	#dl-menu {
		display:block;
		border-style: solid;
		border-width: 1px;
		border-color: transparent;
	}
	#dl-menu a:link {
		text-decoration: none;	
	}
	.dl-submenu {
		background-color:black;
	}
	.MyButtonInLine {
		display:inline;
	}
	#LayerMenuShadow {
		float:left;
		position:absolute;
		top:3em;
		left:0em;
		width:80%;
		z-index:1000;
	}
	#LayerArbo, #LayerArboHeightClone {
		height:auto;
		width:100%;
		z-index:1;
	}
	#LayerCorps {z-index:1;}
	.MenuBarVertical, .MenuBarVerticalNV2, ul.MenuBarVertical ul.MenuBarVertical li, ul.MenuBarVerticalNV2 ul.MenuBarVerticalNV2 li {
		width:100%;
	}
	ul.MenuBarVertical ul li {
		width: 100%;
	}
	ul.MenuBarVertical {
		width:100%;
	}
	ul.MenuBarVertical li{
		width:100%;
	}
	ul.MenuBarVerticalNV2 {
		width:80%;
	}
	ul.MenuBarVerticalNV2 li {
		width:80%;
	}
	ul.MenuBarVertical a {
		font-size: 1em;
	}
	#LayerArbo {
		margin: 0px;
		/*height: 190px; /* en cas de modif de cette valeur, alors modifier dans le Template "Le-Plaisir-a-velo.dwt" la variable var MyLayerArboHeightMobi */
	}
	.TableMenus {
		/*display:none;*/
		width: 97%;
	}
	#LayerArboCorps{
		margin: 0px;
		width:100%;		
	}
	#LayerCorps {
		font-family: 'Inter', Verdana, Arial, Helvetica, sans-serif;
		/*font-size:12px;*/
		/*font-family: Verdana, Arial, Helvetica, sans-serif; ligne utile uniquement lord du test des Google Fonts pour que ces Fonts speciales ne s'appliquent pas sur mobile*/
		width:100%;
		height:auto;
		z-index:1;
		border-style: none;
		border-width: 0px;
		padding: 0px;
		padding-right: 5px;
		margin: 0px;
	}
	.StyCorpsMoins1pix{font-size:0.75em;}
	.StyCorpsMoins2pix{font-size:0.70em;}
	.StyCorpsMoins3pix{font-size:0.65em;}/* identique a Moins2pix car sinon trop petit */
/*	.StyCorpsMoins1pix{font-size:11px;}
	.StyCorpsMoins2pix{font-size:10px;}
	.StyCorpsMoins3pix{font-size:10px;}/* identique a Moins2pix car sinon trop petit */ 

	#LayerArbo, #LayerCorps, .StyMenuMarge{
		font-size:0.85em;	/* 1em */
		line-height:135%;
	}
	.StyMenuText{
		font-size:0.9em;	/* 1em */
		line-height:1.4em;
	}
	#LayerArbo a {
		/* Pour éviter l'erreur Google de liens clicables trop proches sur mobiles */
		line-height:175%;
	}
	#LayerCorps a {
		/* Pour éviter l'erreur Google de liens clicables trop proches sur mobiles */
		line-height:200%;
	}
	#map_Zones_Details_Mobi41_42 {
		display:block;
	}
	#LayerMap41, #LayerMap42 {
		width:100%;
		height:auto;
	}
	.StyMenuArbo {
		font-size:0.8em;
	}
	.LigneMenuFin {
		display:inline;
	}
	.LigneMenuDebut {
		display:none;
	}

/*	h1{ font-size:1.3em;}
	h2{ font-size:1.2em;}
	h3{ font-size:1.1em; margin-left:1em;}
	h4{ font-size:1.0em; margin-left:2em;}
	h5{ font-size:1.0em; margin-left:3em;} */
	h1{ font-size:1.1em;}
	h2{ font-size:1.0em;}
	h3{ font-size:0.9em; margin-left:1em;}
	h4{ font-size:0.8em; margin-left:2em;}
	h5{ font-size:0.8em; margin-left:3em;}
	.TheNews {
		float:none;
		height:150px;
		margin-left:0;
		width:99%;
		overflow: scroll;
	  float:left;
	  z-index:1;
	}
	.TheNews_suite {
	  display:block;
	  float:right;
	  /* https://www.w3schools.com/howto/howto_css_image_sticky.asp */
	  position: -webkit-sticky; /* Safari */
	  position: sticky;
	  top: 50px; 
	  /* */
	  padding-top: 60px;
	  margin-right: 0px;
	  width:38px; 
	  height:35px; 
	  z-index: 11; 
	}
	.Diaporama img{
		border: 0px;
		width: 34px;
		height: 34px;	
	}
/*	.Diaporama tr{
		line-height: 40px;	
		height: 40px;	
	}*/
	.DiapoTable tr{
		line-height: 50px;	
		height: 50px;	
	}
	.NosCycloRandonnees {
		height:3em; 
		width:100%; 
		font-size:11px;
	}
	.ContainerProjetsCycloRandonnees {
		height:800px; 
	}
	.ContainerBalades {
		height:auto;
		width:100%;
	}
	.balade_Canvas {
		float:none;
		width:70%;
		margin-bottom:10px;
	}
	.SuisseContainer {height:300px;}
	.SuisseCanvas {height:300px;}
	.mappa {width:90%;}
	.BoutAgrand_map{left:20px;}
	/*.PourTitle{display:none;}*/
	.mobiImgReduc { 
		max-width: 100%; 
		height: auto;
	}
	.mobiImgReduc1x1 { width:  1px; height: 1px;}
	.mobiImgReduc15  { width:  15%; height: auto;}
	.mobiImgReduc25  { width:  25%; height: auto;}
	.mobiImgReduc33  { width:  33%; height: auto;}
	.mobiImgReduc45  { width:  45%; height: auto;}
	.mobiImgReduc50  { width:  50%; height: auto;}
	.mobiImgReduc66  { width:  66%; height: auto;}
	.mobiImgReduc75  { width:  75%; height: auto;}
	.mobiImgReduc80  { width:  80%; height: auto;}
	.mobiImgReduc85  { width:  85%; height: auto;}
	.mobiImgReduc90  { width:  90%; height: auto;}
	.mobiImgReduc100 { width: 100%; height: auto;}
	.mobiImgReduc15R { height:  15%; width: auto;}
	.mobiImgReduc25R { height:  25%; width: auto;}
	.mobiImgReduc50R { height:  50%; width: auto;}
	.mobiImgReduc75R { height:  75%; width: auto;}
	.mobiImgReduc85R { height:  85%; width: auto;}
	.mobiImgReduc100R{ height: 100%; width: auto;}

	.mobiImgReduc15S  { width:  15%; height: 15%;}
	.mobiImgReduc25S  { width:  25%; height: 25%;}
	.mobiImgReduc33S  { width:  33%; height: 33%;}
	.mobiImgReduc45S  { width:  45%; height: 45%;}
	.mobiImgReduc50S  { width:  50%; height: 50%;}
	.mobiImgReduc75S  { width:  75%; height: 75%;}
	.mobiImgReduc80S  { width:  80%; height: 80%;}
	.mobiImgReduc90S  { width:  90%; height: 90%;}
	
/*	.MobiTablCompact1_map {font-size:0.7em;}
	.mobiTablCompact2_map {font-size:0.6em;}
	.mobiTablCompact3_map {font-size:0.5em;} */
	.mobiTablCompact1_map, .mobiTablCompact2_map, .mobiTablCompact3_map {line-height:120%;}
	.mobiTablCompact1_map {font-size:0.75em;}
	.mobiTablCompact2_map {font-size:0.7em;}
	.mobiTablCompact3_map {font-size:0.65em;}
	
	.mobiDisplayYes { display: block; }
	.mobiDisplayNo { display: none; }
	.mobiFloatNo { float: none; }
	.mobiFloatLeft { float: left; }
	.mobiFloatRight { float: right; }
	
	.mobiLeft0 {margin-left:0px;}
	.mobiRight0 {margin-right:0px;}
	.mobiTop0 {margin-top:0px;}
	.mobiBottom0 {margin-bottom:0px;}

	.mobiLeft5 {margin-left:5px;}
	.mobiRight5 {margin-right:5px;}
	.mobiTop5 {margin-top:5px;}
	.mobiBottom5 {margin-bottom:5px;}

	.mobiLeft10 {margin-left:10px;}
	.mobiRight10 {margin-right:10px;}
	.mobiTop10 {margin-top:10px;}
	.mobiBottom10 {margin-bottom:10px;}

	.mobiLeft50 {margin-left:50px;}
	.mobiRight50 {margin-right:50px;}
	.mobiTop50 {margin-top:50px;}
	.mobiBottom50 {margin-bottom:50px;}

	.mobiLeft100 {margin-left:100px;}
	.mobiRight100 {margin-right:100px;}
	.mobiTop100 {margin-top:100px;}
	.mobiBottom100 {margin-bottom:100px;}
	
	.mobiWidth25 {width:25%;}
	.mobiWidth50 {width:50%;}
	.mobiWidth75 {width:75%;}
	.mobiWidth80 {width:80%;}
	.mobiWidth85 {width:85%;}
	.mobiWidth90 {width:90%;}
	.mobiWidth100 {width:100%;}
	
	.mobiStyMoins1{font-size:0.9em;}
	.mobiStyMoins2{font-size:0.8em;}
	.mobiStyMoins3{font-size:0.7em;}
	.mobiStyMoins4{font-size:0.6em;}
	.mobiStyMoins5{font-size:0.5em;}
	.mobiLineHeight100{line-height:100%;}
	.mobiForm{width:150px;}
	.mobiCols{width:150px;}
	
	.mobiAbsolute{position:absolute}
	.mobiRelative{position:relative}
	.mobiFixed{
		position:fixed;
		top:1px;
		left:1px;
	}
	.mobi-center-div {
		 margin: 0 auto;
		 width: 100px; 
	}
	table.mobiDiaporama img{
/*	max-width:100%;
    max-height:14%;
    width: 100%;
    height: auto;*/
	} 
	.colonne1de3, .colonne2de3, .colonne3de3 {
		float:none; 
		width:100%; 
		margin-bottom:10px;
		margin-left:0%; 
	}
	.col-container {
		display: block; /* CANCEL : Make the container element behave like a table */
		width: 100%; /* Set full-width to expand the whole page */
	}
	.col {
		display: block; /* CANCEL Make elements inside the container behave like table cells */
		width:auto;
	}
	.CadreDownload:first-child{
		border-right-width: 2px;
	}

	.col_Famille_1 {padding-left: 0px; text-align:center;}
	.col_Famille_2 {
		padding-left: 0px;
		line-height: 100%;
	}
	.h2_RC {display:block}
	.IMG_Desktop {display: none}
	.IMG_Mobile {display: block}

}