@media (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */
	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	.nav {background-color:#636363;height:100%;}
	.nav a:{color:#FFF;}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
	max-width: 100%;
	}
	/* conserver le ratio des images */
	img {
		height: auto;
	}
	/* gestion des mots longs */
	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
	.nav,
	.header {
		float: none;
		width: auto;
	}
	/* masquer les éléments superflus */
	.hide_mobile {
		display: none !important;
	}
    .wrapper,
    .content,
    .aside { width: 100%;}
	.aside2{visibility: hidden;}
    .content,
    .aside { clear: both; float: none; width: 100%; }
	.slogan {visibility: hidden;}
    /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
    .nav ul li a { float: none; border: 0;    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.7em;
		line-height: 0.8em;}
    .arbo { display: none;}
    .footer .colophon { width: 100%;}
    .footer .generator {display: none;}
}
/* largeur maximum 640px */
@media (max-width: 640px) {
  body {font-size:.95em;}
  h1,.h1,
  h2,.h2 { line-height:1;}
}


@media (max-width: 640px) {
     /* layout */
    .wrapper,
    .content,
    .aside { width: 100%;}
    .content,
    .aside { clear: both; float: none; width: 100%; }
    /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
    .nav ul li a { float: none; border: 0; 
	font-size: medium;}
    .arbo { display: none; }
    .footer .colophon { width: 100%; float: none; }
	.footer .colophon a:hover {color:#FFFFFF}
	.footer .colophon a:visited {color:#FFFFFF}
    .footer .generator { display: none; }
	.aside2 {display:none;}
	.page {width:100%;}

    /* header du calendrier full-calendar */
    table.fc-header td { display: block; text-align: left; }

}
@media only screen and (max-width:640px) 
{
	.row {
		width : 100%;}
	.row > div {
    margin-top: 0px;
    margin-right: 1%;
    margin-left: 1%;
    margin-bottom: 0px;
}
	.w-1, .w-2, .w-3, .w-4, .w-5, .w-6, .w-7, .w-8, .w-9, .w-11, .w-12 { 
		width : 100%; 
		float : none;}
		.biggest {font-size: 1.5em;}
}
@media only screen and (min-width:500px) and (max-width:767) 

{
	.row {
    width : 95%;
    margin-left: 15px;
	}
	.row > div { 
		margin : 0 0%;
	}
		.w-2 {
    width : 100%;
    margin-top: 0em;
    margin-right: 0.5em;
    margin-bottom: 0em;
    margin-left: 0.5em;
}
		.w-3 {
    width : 100%;
    margin-top: 0em;
    margin-right: 0.5em;
    margin-bottom: 0em;
    margin-left: 0.5em;
}
		.w-4 {
    width : 100%;
    margin-top: 0em;
    margin-right: 0.5em;
    margin-bottom: 0em;
    margin-left: 0.5em;
}
		.w-5 {
    width : 100%;
    margin-top: 0em;
    margin-right: 0.5em;
    margin-bottom: 0em;
    margin-left: 0.5em;
}
	.w-6 {
    width : 100%;
    margin-top: 0em;
    margin-right: 0.5em;
    margin-bottom: 0em;
    margin-left: 0.5em;
}
	.w-4 {
    width : 100%;
    margin-top: 0em;
    margin-right: 0.5em;
    margin-bottom: 0em;
    margin-left: 0.5em;
}
	.w-7 { width : 100%; }
	.w-7 { width : 100%; }
	.w-9 { width : 100%; }
	.biggest{font-size: 1.5em;}
}
/* largeur maximum 767px */
@media (max-width: 767px) {
	body {width: 100%;padding: 0px 20px;	}
	.page {width: 100%;}
	.aside2{visibility: hidden;}
	.nav li a {
    display: inline-block;
    padding-right: 0.5em;
    padding-left: 0.5em;
    text-decoration: none;
    background: #fff;
    color: #000;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.7em;
		line-height: 0.8em;}

}
/* largeur maximum 767px */
@media (max-width: 767px) { 
  .pagination {line-height:3;}
}
@media (max-width: 767px) {
	body {   	width: 100%;		padding: 0 20px;	}
	.page {  	width: 100%;  	max-width: none; 	}
    .nav ul li a { float: none; border: 0; 
	font-size: medium;}
		.page {width:100%;}
}
@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}