/**
 * CUSTOM.CSS AVEC LES TAILLES D'ÉCRAN
 * Voici une feuille de style type, bien entendu vous pouvez ajouter
 * ou supprimer des propriétés CSS en fonction de vos besoins.
 */

/**
 * Éléments principaux
 */

/* Hauteur de ligne des paragraphes */
p {
  line-height:1.5;
}

/*
* Grille du site
* Barres et page
*/
#contentLeft {
}
#contentRight {
}
#contentSite {
}

/* Bannière */
header {
  /* background-image:url('/rucheconnectee.mc/site/file/source/theme-perso/tournage.jpg'); */
}

/* Titre de la bannière */
header span {
}

/* Menu */
nav {
}

/* Items du menu */
nav a {
}

/* Items au survol du menu */
nav a:hover {
}

/* Item courant du menu */
nav a.active {
}

/* Menu latéral */
/* aspect des puces */
ul #menuSide  {
}
/* Block menu à droite */
#menuSideRight {
}
/* Block menu à gauche */
#menuSideLeft {
}


/* Bas de page */
footer {
}

footer #footersite, #footerbody {
}

/* Liens du bas de page */
footer #footersite, #footerbody a {
}

/* footer bloc gauche */
footer #footersiteLeft, #footerbodyLeft  {
}

/* footer bloc central */
footer #footersiteCenter, #footerbodyCenter {
}

/* footer bloc droite */
footer #footersiteRight, #footerbodyRight {
}



/**
 * Éléments de contenu
 */

/* Titres */
h1,
h2,
h3,
h4 {
}

/* Liens */
a {
}

/* Liens au survol */
a:hover {
}

/* Liens au clic */
a:active {
}

/* Boutons */
.button,
button[type='submit'],
.pagination a {
}

/* Boutons au survol */
.button:hover,
button[type='submit']:hover,
.pagination a:hover {
}

/* Boutons au clic */
.button:active,
button[type='submit']:active,
.pagination a:active {
}

/* Cases à cocher */
input[type='checkbox']:checked + label:before {
}

/* Cases à cocher au survol */
input[type='checkbox']:not(:active):checked:hover + label:before,
input[type='checkbox']:active + label:before {
}

/* Champs de formulaire */
input[type='text'],
input[type='password'],
.inputFile,
select,
textarea {
}

/* Champs de formulaire au survol */
input[type='text']:hover,
input[type='password']:hover,
.inputFile:hover,
select:hover,
textarea:hover {
}

/* Modules News et Blog */

.blogDate {
}

.blogPicture {
}

.blogPicture img {
}

.blogComment {
}

.blogTitle {
}

.blogContent {
}

.newsTitle {
    /*background-color: grey;*/
}

.newsContent {
}

.newsSignature {
    color: 	#404040;
}

/* Consentement aux cookies */

/*

#cookieConsent {

  width: 80%;

  color: #FFF;

  background: #212223;

  opacity: 0.9;

}

#cookieConsent a{

  color : yellow;

}

#cookieConsent h3{

  color : red;

}

#cookieConsentConfirm {

  background: rgba(0,0,255,1);

  color: rgba(255,255,255,1);

}

#cookieConsentConfirm:hover {

  background: rgba(0,50,255,1);

  color: rgba(255,255,255,1);

}

*/


/* Personnalisations */
@font-face {
	font-family: 'Calibri';
	src: url('/site/file/source/fonts/calibri.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

.nouvelle {
  display: none;
}

.date-nouvelle {
  cursor: pointer;
}

h4 {
  display:inline-block;
  color : red;
  margin-bottom:0em;
}

h5 {
  display:inline-block;
  margin-right : 2em;
}

.infos-complementaires {
  text-align: center;
  font-size: 0.9em; 
  display: inline-block; 
  margin: 1em;
}

@media only screen and (max-device-width: 384px) {

	.bannerDisplay {
		display: block!important;
		height: 53vh!important;
	}

	body {
		color:grey;
		font-size:18px;
		background-color:#a4daff;
		font-family: Calibri;
		font-size:1em;		
	}

	#conteneur {
		width:100%;
		background-color:white;
		text-align:justify;
	}
	
	#en_tete {
		height:58vh;
		width:100%;
		text-align: left;
		vertical-align:top;
		background-color:#ffc400;
	}

	#logo_ruches_monaco {
		
		width:98%;
		display:inline-block;
		margin-top:0.5em; 
		margin-left:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;	
	}
	
	#logo{
		width:100%;
	}
	
	#logo-gouv { /* Image du logo */
		border:none;
		width:100%;
		min-width:20px;
		min-height:7px;
		margin-right:10px;
		margin-bottom: 3em;
	}
	
	#logo_gouv_mc {
		width:95%;
		/* display:inline-block; */
		float:right;
		margin-top:0.5em; 
		margin-right:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;
		vertical-align: top;
	}
	
	#presence_social_network {
		text-align:center;
		margin-left:1em; 
		margin-top:0.5em;
		width:100%;
		display:inline-block;
	}

	#facebook, #linkedin, #twitter {
		width:60px;
	}

	#navigation-site {
		font-size: 1em;
		background-color:#ffc400;
		padding-right:2em;
		padding-left:2em;
		margin-top: -1.2em;
		margin-bottom: 1em;
	}
	
	#sommaire_rapide {
		display: none;
		padding : 5px;
		text-align:justify;
		width:90%;
	}
	
	#menu_navigation_rapide {
		font-size:2em;
		cursor:pointer;
	}
	
	#image-menu {
		width:5em;
		margin-right: 2em;
	}

	div.menu-entree {
		text-align:left;
		display:inline-block;
		margin-left:1em;
		margin-right:1em;
		font-size: 4em;
	}
	
	a.lien-actif {
		color:yellow;
		font-weight:bold;
		
	}
	
	a.lien-inactif {
		color:white;
		font-weight:bold;
	}
	
	#pied {
		background-color:black;
		padding:1em;
		height:50vh;
	}

	#mentions {
		display:inline-block;
		padding:10px;
		font-size:3em;
	}
	
	div.copyright {
		font-size:3em;
	}

	#mentions a {
		font-size:1em;
		font-weight:bold;
		color:lightgrey;
	}

	.accessibilite {
		color:white;	
		display:block;
		width:100%;
		padding:1em;
		text-align:left;
		font-size:1.2em;
	}

	.accessibilite a {
		color:yellow;
	}

	.accessibilite h3 {
		color:yellow;
		font-size:12px;
		font-weight:bold;
	}

	.accessibilite li {
		text-align:left;
		list-style-position:inside;
	}
	
	#partenaires {
		text-align:right;
		padding-top:10px;
		width:auto;
		display:inline-block;
	}
	
	#fpaii {
		width:400px;
	}

	#mairiemc {
		width:235px;
	}

	#news {
		display: inline-block;
		width: 100%;
		padding: 0em;
		font-size: 3em;
	}

	h1.actualites-titre {
		font-size:1.5em;	
	}
	
	#accueil {
		margin:auto;
		vertical-align:top;
		display:inline-block;
	}

	p.date {
		text-decoration:italic;
		font-weight:bold;
		color:grey;
	}

	div.normal {
		font-size: 1em;
		background-color:white;
		padding-right:2em;
		padding-left:2em;
		vertical-align:top;
	}

	h2 {
		color: red;
		text-align: left;
	}

	h3 {
		color: red;	
	}

	.titre_document {
		text-align:right;
	}

	.mot_gras {
		color:darkred;
		font-weight:bold;
	}

	#texte {
		display:inline-block;
		width:95%;
		vertical-align:top;
		margin:2em;
		font-size:1.2em;
		text-align:justify;
		margin:auto;
	}

	#image {
		display:inline-block;
		width:95%;
		vertical-align:top;
		margin:auto;
	}
		
	.div-photo-actualite {
		vertical-align:top;
  		display: inline-block; 
  		width: 90%; 
  		margin:1em;
	}

	.photo-actualite {
  		width: 100%;
	}
	
	.ruche-icone {
  		width: 95%;
		display:inline-block;
		margin:1em;
	}
		
	.ruche-icone-img {
  		width: 95%;
	}
	
	.ruche-icone-img-bigger {
  		width: 98%;
	}
}	




@media only screen and (min-device-width: 385px) and (max-device-width: 480px) {

	.bannerDisplay {
		display: block!important;
		height: 49vh!important;
	}

	body {
		color:grey;
		font-size:18px;
		background-color:#a4daff;
		font-family: Calibri;
		font-size:1em;		
	}

	#conteneur {
		width:100%;
		background-color:white;
		text-align:justify;
	}
	
	#en_tete {
		height:53vh;
		width:100%;
		text-align: left;
		vertical-align:top;
		background-color:#ffc400;
	}

	#logo_ruches_monaco {
		
		width:98%;
		display:inline-block;
		margin-top:0.5em; 
		margin-left:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;	
	}
	
	#logo{
		width:100%;
	}
	
	#logo-gouv { /* Image du logo */
		border:none;
		width:100%;
		min-width:20px;
		min-height:7px;
		margin-right:10px;
		margin-bottom: 3em;
	}
	
	#logo_gouv_mc {
		width:98%;
		/* display:inline-block; */
		float:right;
		margin-top:0.5em; 
		margin-right:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;
		vertical-align: top;
	}
	
	#presence_social_network {
		text-align:center;
		margin-left:1em; 
		margin-top:0.5em;
		width:100%;
		display:inline-block;
	}
	
	#facebook, #linkedin, #twitter {
		width:54px;
	}

	#navigation-site {
		font-size: 1em;
		background-color:#ffc400;
		padding-right:2em;
		padding-left:2em;
		margin-top: -1.2em;
		margin-bottom: 1em;
	}
	
	#sommaire_rapide {
		display: none;
		padding : 5px;
		text-align:justify;
		width:90%;
	}
	
	#menu_navigation_rapide {
		font-size:2em;
		cursor:pointer;
	}
	
	#image-menu {
		width:4em;
		margin-right: 2em;
	}

	div.menu-entree {
		text-align:left;
		display:inline-block;
		margin-left:1em;
		margin-right:1em;
		font-size: 3em;
	}
	
	a.lien-actif {
		color:yellow;
		font-weight:bold;
	}
	
	a.lien-inactif {
		color:white;
		font-weight:bold;
	}

	.accessibilite {
		color:white;
		display:inline-block;
		width:100%;
		float:left;
		padding:1em;
		text-align:left;
		font-size:1.2em;
	}

	#pied {
		background-color:black;
		padding:1em;
		height:50vh;
	}

	#mentions {
		display:inline-block;
		padding:10px;
		font-size:3em;
	}
	
	div.copyright {
		font-size:3em;
	}

	#mentions a {
		font-size:1em;
		font-weight:bold;
		color:lightgrey;
	}

	.accessibilite a {
		color:yellow;
	}

	.accessibilite h3 {
		color:yellow;
		font-size:12px;
		font-weight:bold;
	}

	.accessibilite li {
		text-align:left;
		list-style-position:inside;
	}
	
	#partenaires {
		text-align:right;
		padding-top:10px;
		width:auto;
		display:inline-block;
	}
	
	#fpaii {
		width:400px;
	}

	#mairiemc {
		width:240px;
	}

	#news {
		display: inline-block;
		width: 100%;
		padding: 0em;
		font-size: 3em;
	}

	h1.actualites-titre {
		font-size:1.5em;	
	}
	
	#accueil {
		margin:auto;
		vertical-align:top;
		display:inline-block;
	}

	p.date {
		text-decoration:italic;
		font-weight:bold;
		color:grey;
	}

	div.normal {
		font-size: 1em;
		background-color:white;
		padding-right:2em;
		padding-left:2em;
		vertical-align:top;
	}

	h2 {
		color: red;	
		text-align: left;
	}

	h3 {
		color: red;	
	}

	.titre_document {
		text-align:right;
	}

	.mot_gras {
		color:darkred;
		font-weight:bold;
	}

	#texte {
		display:inline-block;
		text-align:justify;
		width:95%;
		vertical-align:top;
		font-size:1.2em;
		margin:auto;
	}

	#image {
		display:inline-block;
		width:95%;
		vertical-align:top;
		margin:auto;
	}
			
	.div-photo-actualite {
		vertical-align:top;
  		display: inline-block; 
  		width: 90%; 
  		margin:1em;
	}

	.photo-actualite {
  		width: 100%;
	}	
	
	.ruche-icone {
  		width: 95%;
		display:inline-block;
		margin:1em;
	}
		
	.ruche-icone-img {
  		width: 95%;
	}
	
	.ruche-icone-img-bigger {
  		width: 98%;
	}
}


@media only screen and (min-device-width: 481px) and (max-device-width: 640px) {

	.bannerDisplay {
		display: block!important;
		height: 50vh!important;
	}

	body {
		color:grey;
		font-size:18px;
		background-color:#a4daff;
		font-family: Calibri;
		font-size:1em;		
	}

	#conteneur {
		width:100%;
		background-color:white;
		text-align:justify;
	}
	
	#en_tete {
		height:21vh;
		width:100%;
		text-align: left;
		vertical-align:top;
		background-color:#ffc400;
	}

	#logo_ruches_monaco {
		
		width:60%;
		display:inline-block;
		margin-top:0.5em; 
		margin-left:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;	
	}
	
	#logo{
		width:100%;
	}
	
	#logo-gouv { /* Image du logo */
		border:none;
		width:100%;
		min-width:20px;
		min-height:7px;
		margin-right:10px;
		margin-bottom: 3em;
	}
	
	#logo_gouv_mc {
		width:35%;
		/* display:inline-block; */
		float:right;
		margin-top:0.5em; 
		margin-right:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;
		vertical-align: top;
	}
	
	#presence_social_network {
		text-align:justify;
		margin-left:1em; 
		margin-top:0.5em;
		width:100%;
		display:inline-block;
	}
	
	#facebook, #linkedin, #twitter {
		width:70px;
	}

	#navigation-site {
		font-size: 1em;
		background-color:#ffc400;
		padding-right:2em;
		padding-left:2em;
		margin-top: -1.2em;
		margin-bottom: 1em;
	}
	
	#sommaire_rapide {
		display: none;
		padding : 5px;
		text-align:justify;
		width:90%;
	}
	
	#menu_navigation_rapide {
		font-size:2em;
		cursor:pointer;
	}
	
	#image-menu {
		width:2.5em;
		margin-right: 2em;
	}

	div.menu-entree {
		text-align:left;
		display:inline-block;
		margin-left:1em;
		margin-right:1em;
		font-size: 4em;
	}
	
	a.lien-actif {
		color:yellow;
		font-weight:bold;
		
	}
	
	a.lien-inactif {
		color:white;
		font-weight:bold;
	}
	
	#pied {
		background-color:black;
		padding:1em;
		height:40vh;
	}

	#mentions {
		display:inline-block;
		padding:10px;
		font-size:3em;
	}

	div.copyright {
		font-size:2em;
	}
	
	#mentions a {
		font-size:0.8em;
		font-weight:bold;
		color:lightgrey;
	}

	.accessibilite {
		color:white;
		display:inline-block;
		width:100%;
		float:left;
		padding:10px;
		text-align:left;
		font-size:3em;
	}

	.accessibilite a {
		color:yellow;
	}

	.accessibilite h3 {
		color:yellow;
		font-size:12px;
		font-weight:bold;
	}

	.accessibilite li {
		text-align:left;
		list-style-position:inside;
	}
	
	#partenaires {
		text-align:right;
		padding-top:10px;
		width:auto;
		display:inline-block;
	}

	#fpaii {
		width:300px;
	}

	#mairiemc {
		width:170px;
	}

	#news {
		display: inline-block;
		width: 100%;
		padding: 0em;
		font-size: 2em;
	}

	h1.actualites-titre {
		font-size:1.5em;	
	}
	
	#accueil {
		margin:auto;
		vertical-align:top;
		display:inline-block;
	}

	p.date {
		text-decoration:italic;
		font-weight:bold;
		color:grey;
	}

	div.normal {
		font-size: 1em;
		background-color:white;
		padding-right:2em;
		padding-left:2em;
		vertical-align:top;
	}

	h2 {
		color: red;
		text-align: left;
	}

	h3 {
		color: red;	
	}

	.titre_document {
		text-align:right;
	}

	.mot_gras {
		color:darkred;
		font-weight:bold;
	}

	#texte {
		display:inline-block;
		width:95%;
		vertical-align:top;
		margin:2em;
		font-size:2.8em;
		margin:auto;
		text-align:justify;
	}

	#image {
		display:inline-block;
		width:95%;
		vertical-align:top;
		margin:auto;
	}
		
	.div-photo-actualite {
		vertical-align:top;
  		display: inline-block; 
  		width: 90%; 
  		margin:1em;
	}

	.photo-actualite {
  		width: 100%;
	}
	
	.ruche-icone {
  		width: 95%;
		display:inline-block;
		margin:1em;
	}
		
	.ruche-icone-img {
  		width: 95%;
	}
	
	.ruche-icone-img-bigger {
  		width: 98%;
	}
}


@media only screen and (min-device-width: 641px) and (max-device-width: 720px) {

	.bannerDisplay {
		display: block!important;
		height: 52vh!important;
	}
	
	body {
		color:grey;
		font-size:18px;
		background-color:#a4daff;
		font-family: Calibri;
		font-size:1em;		
	}

	#conteneur {
		width:100%;
		background-color:white;
		text-align:justify;
	}
	
	#en_tete {
		height:20vh;
		width:100%;
		text-align: left;
		vertical-align:top;
		background-color:#ffc400;
	}

	#logo_ruches_monaco {
		
		width:50%;
		display:inline-block;
		margin-top:0.5em; 
		margin-left:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;	
	}
	
	#logo{
		width:100%;
	}
	
	#logo-gouv { /* Image du logo */
		border:none;
		width:100%;
		min-width:20px;
		min-height:7px;
		margin-right:10px;
		margin-bottom: 3em;
	}
	
	#logo_gouv_mc {
		width:45%;
		/* display:inline-block; */
		float:right;
		margin-top:0.5em; 
		margin-right:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;
		vertical-align: top;
	}
		
	#presence_social_network {
		text-align:justify;
		margin-left:1em; 
		margin-top:0.5em;
		width:100%;
		display:inline-block;
	}

	#facebook, #linkedin, #twitter {
		width:50px;
	}

	#navigation-site {
		font-size: 1em;
		background-color:#ffc400;
		padding-right:2em;
		padding-left:2em;
		margin-top: -1.2em;
		margin-bottom: 1em;
	}
	
	#sommaire_rapide {
		display: none;
		padding : 5px;
		text-align:justify;
		width:90%;
	}
	
	#menu_navigation_rapide {
		font-size:2em;
		cursor:pointer;
	}
	
	#image-menu {
		width:1em;
		margin-right: 2em;
	}

	div.menu-entree {
		text-align:left;
		display:inline-block;
		margin-left:1em;
		margin-right:1em;
		font-size: 3em;
	}
	
	a.lien-actif {
		color:yellow;
		font-weight:bold;
		
	}
	
	a.lien-inactif {
		color:white;
		font-weight:bold;
	}
	
	#pied {
		background-color:black;
		padding:1em;
		height:27vh;
	}
	
	#mentions {
		display:inline-block;
		padding:10px;
		font-size:2em;
	}

	div.copyright {
		font-size:1.1em;
	}

	#mentions a {
		font-size:0.8em;
		font-weight:bold;
		color:lightgrey;
	}

	.accessibilite {
		color:white;
		display:inline-block;
		width:50%;
		float:left;
		padding:10px;
		text-align:left;
		font-size:2em;
	}

	.accessibilite a {
		color:yellow;
	}

	.accessibilite h3 {
		color:yellow;
		font-size:12px;
		font-weight:bold;
	}

	.accessibilite li {
		text-align:left;
		list-style-position:inside;
	}
	
	#partenaires {
		text-align:right;
		padding-top:10px;
		width:auto;
		display:inline-block;
	}	

	#fpaii {
		width:250px;
	}

	#mairiemc {
		width:150px;
	}

	#news {
		display: inline-block;
		width: 36%;
		padding: 1em;
	}

	h1.actualites-titre {
		font-size:1.2em;	
	}
		
	#accueil {
		margin:auto;
		vertical-align:top;
		display:inline-block;
	}

	p.date {
		text-decoration:italic;
		font-weight:bold;
		color:grey;
	}

	div.normal {
		font-size: 1em;
		background-color:white;
		padding-right:2em;
		padding-left:2em;
		vertical-align:top;
	}

	h2 {
		color: red;
		text-align: left;
	}

	h3 {
		color: red;	
	}

	.titre_document {
		text-align:right;
	}

	.mot_gras {
		color:darkred;
		font-weight:bold;
	}

	#texte {
		display:inline-block;
		width:95%;
		vertical-align:top;
		margin:2em;
		font-size:2em;
		margin:auto;
		text-align:justify;
	}

	#image {
		display:inline-block;
		width:95%;
		vertical-align:top;
		margin:auto;
	}	
		
	.div-photo-actualite {
		vertical-align:top;
  		display: inline-block; 
  		width: 90%; 
  		max-width: 600px;
  		margin:1em;
        text-align:center;
	}

	.photo-actualite {
  		width: 100%;
	}
	
	.ruche-icone {
  		width: 45%;
		display:inline-block;
		margin:1em;
	}
		
	.ruche-icone-img {
  		width: 95%;
	}
	
	.ruche-icone-img-bigger {
  		width: 98%;
	}
}



@media only screen and (min-device-width: 721px) and (max-device-width: 768px) {

	.bannerDisplay {
		display: block!important;
		height: 44vh!important;
	}
	
	
	body {
		color:grey;
		font-size:18px;
		background-color:#a4daff;
		font-family: Calibri;
		font-size:1em;		
	}

	#conteneur {
		width:100%;
		background-color:white;
		text-align:justify;
	}

	#en_tete {
		height:28vh;
		width:100%;
		text-align: left;
		vertical-align:top;
		background-color:#ffc400;
	}

	#logo_ruches_monaco {
		
		width:50%;
		display:inline-block;
		margin-top:0.5em; 
		margin-left:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;	
	}
	
	#logo{
		width:100%;
	}
	
	#logo-gouv { /* Image du logo */
		border:none;
		width:100%;
		min-width:20px;
		min-height:7px;
		margin-right:10px;
		margin-bottom: 3em;
	}
	
	#logo_gouv_mc {
		width:40%;
		/* display:inline-block; */
		float:right;
		margin-top:0.5em; 
		margin-right:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;
		vertical-align: top;
	}
	
	#presence_social_network {
		text-align:center;
		margin-left:1em; 
		margin-top:0.5em;
		width:100%;
		display:flex;
		flex-direction:column;
		flex-wrap:wrap;
	}

	#facebook, #linkedin, #twitter {
		width:30px;
	}

	#navigation-site {
		font-size: 1em;
		background-color:#ffc400;
		padding-right:2em;
		padding-left:2em;
		margin-top: -1.2em;
		margin-bottom: 1em;
	}
	
	#sommaire_rapide {
		display: none;
		padding : 5px;
		text-align:justify;
		width:90%;
	}
	
	#menu_navigation_rapide {
		font-size:2em;
		cursor:pointer;
	}
	
	#image-menu {
		width:1em;
		margin-right: 2em;
	}

	div.menu-entree {
		text-align:center;
		display:inline-block;
		margin-left:1em;
		margin-right:1em;
		font-size: 1.3em;
	}
	
	a.lien-actif {
		color:yellow;
		font-weight:bold;
	}
	
	a.lien-inactif {
		color:white;
		font-weight:bold;
	}
	
	#pied {
		background-color:black;
		padding:1em;
		height:23vh;
	}

	#mentions {
		display:inline-block;
		padding:10px;
		font-size:1.5em;
	}

	div.copyright {
		font-size:1.2em;
	}

	#mentions a {
		font-size:0.8em;
		font-weight:bold;
		color:lightgrey;
	}

	.accessibilite {
		color:white;
		display:inline-block;
		width:50%;
		float:left;
		padding:10px;
		text-align:left;
		font-size: 1.5em;
	}

	.accessibilite a {
		color:yellow;
	}

	.accessibilite h3 {
		color:yellow;
		font-size:12px;
		font-weight:bold;
	}

	.accessibilite li {
		text-align:left;
		list-style-position:inside;
	}
		
	#partenaires {
		text-align:right;
		padding-top:10px;
		width:auto;
		display:inline-block;
	}

	#fpaii {
		width:250px;
	}

	#mairiemc {
		width:150px;
	}

	#news {
		display: inline-block;
		width: 30%;
		padding: 1em;
	}
	
	h1.actualites-titre {
		font-size:1.2em;	
	}

	#accueil {
		margin:auto;
		vertical-align:top;
		display:inline-block;
	}
	
	p.date {
		text-decoration:italic;
		font-weight:bold;
		color:grey;
	}

	div.normal {
		font-size: 1em;
		background-color:white;
		padding-right:0em;
		padding-left:0em;
		vertical-align:top;
	}

	h2 {
		color: red;
		text-align: left;
	}

	h3 {
		color: red;	
	}

	.titre_document {
		text-align:right;
	}

	.mot_gras {
		color:darkred;
		font-weight:bold;
	}

	#texte {
		display:inline-block;
		width:43%;
		vertical-align:top;
		margin:0em;
		font-size:1.1em;
		margin-right:0em;
		text-align:justify;
	}

	#image {
		display:inline-block;
		width:48%;
		vertical-align:top;
		margin:auto;
	}
		
	.div-photo-actualite {
		vertical-align:top;
  		display: inline-block; 
  		width: 90%; 
  		max-width: 600px;
  		margin:1em;
		text-align:center;
	}

	.photo-actualite {
  		width: 100%;
	}
	
	.ruche-icone {
  		width: 45%;
		display:inline-block;
		margin:1em;
	}
		
	.ruche-icone-img {
  		width: 95%;
	}
	
	.ruche-icone-img-bigger {
  		width: 98%;
	}
}


	
@media only screen and (min-device-width: 769px) and (max-device-width: 980px) {

	body {
		color:grey;
		font-size:18px;
		background-color:#a4daff;
		font-family: Calibri;
		font-size:1em;		
	}

	#conteneur {
		width:100%;
		background-color:white;
		text-align:justify;
	}
	
	#en_tete {
		height:23vh;
		width:100%;
		text-align: left;
		vertical-align:top;
		background-color:#ffc400;
	}

	#logo_ruches_monaco {
		
		width:52%;
		display:inline-block;
		margin-top:0.5em; 
		margin-left:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;	
	}
	
	#logo{
		width:100%;
	}
	
	#logo-gouv { /* Image du logo */
		border:none;
		width:100%;
		min-width:20px;
		min-height:7px;
		margin-right:10px;
		margin-bottom: 3em;
	}
	
	#logo_gouv_mc {
		width:36%;
		/* display:inline-block; */
		float:right;
		margin-top:0.5em; 
		margin-right:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;
		vertical-align: top;
	}
	
	#presence_social_network {
		text-align:justify;
		margin-left:1em; 
		margin-top:0.5em;
		width:100%;
		display:inline-block;
	}

	#facebook, #linkedin, #twitter {
		width:50px;
	}

	#navigation-site {
		font-size: 1em;
		background-color:#ffc400;
		padding-right:2em;
		padding-left:2em;
		margin-top: -1.2em;
		margin-bottom: 1em;
	}
	
	#sommaire_rapide {
		display: none;
		padding : 5px;
		text-align:justify;
		width:90%;
	}
	
	#menu_navigation_rapide {
		font-size:2em;
		cursor:pointer;
	}
	
	#image-menu {
		width:1em;
		margin-right: 2em;
	}

	div.menu-entree {
		text-align:center;
		display:inline-block;
		margin-left:1em;
		margin-right:1em;
		font-size: 1.3em;
	}
	
	a.lien-actif {
		color:yellow;
		font-weight:bold;	
	}
	
	a.lien-inactif {
		color:white;
		font-weight:bold;
	}
	

	#pied {
		background-color:black;
		padding:1em;
		height:22vh;
	}

	#mentions {
		display:inline-block;
		padding:10px;
		font-size:1.3em;
	}

	div.copyright {
		font-size:1.3em;
	}

	#mentions a {
		font-size:0.8em;
		font-weight:bold;
		color:lightgrey;
	}

	.accessibilite {
		color:white;
		display:inline-block;
		width:40%;
		float:left;
		padding:10px;
		text-align:left;
		font-size:1.3em;
	}

	.accessibilite a {
		color:yellow;
	}

	.accessibilite h3 {
		color:yellow;
		font-size:12px;
		font-weight:bold;
	}

	.accessibilite li {
		text-align:left;
		list-style-position:inside;
	}

	#partenaires {
		text-align:right;
		padding-top:10px;
		width:auto;
		display:inline-block;
	}

	#fpaii {
		width:250px;
	}

	#mairiemc {
		width:150px;
	}
	
	#news {
		display: inline-block;
		width: 30%;
		padding: 1em;
	}

	h1.actualites-titre {
		font-size:1.2em;	
	}
	
	#accueil {
		margin:auto;
		vertical-align:top;
		display:inline-block;
	}

	p.date {
		text-decoration:italic;
		font-weight:bold;
		color:grey;
	}
	
	div.normal {
		font-size: 1em;
		background-color:white;
		padding-right:2em;
		padding-left:2em;
		vertical-align:top;
	}

	h2 {
		color: red;
		text-align: left;
	}

	h3 {
		color: red;	
	}

	.titre_document {
		text-align:right;
	}

	.mot_gras {
		color:darkred;
		font-weight:bold;
	}

	#texte {
		display:inline-block;
		width:44%;
		vertical-align:top;
		font-size:1.1em;
		margin:auto;
		margin-left:2em;
		text-align:justify;
	}

	#image {
		display:inline-block;
		width:48%;
		vertical-align:top;
		margin:auto;
	}
		
	.div-photo-actualite {
		vertical-align:top;
  		display: inline-block; 
  		width: 45%; 
  		max-width: 600px;
  		margin:1em;
        text-align:center;
	}

	.photo-actualite {
  		width: 100%;
	}
	
	.ruche-icone {
  		width: 45%;
		display:inline-block;
		margin:1em;
	}
		
	.ruche-icone-img {
  		width: 95%;
	}
	
	.ruche-icone-img-bigger {
  		width: 98%;
	}
}



@media only screen and (min-device-width: 981px) and (max-device-width:1024px) {

	body {
		color:grey;
		font-size:18px;
		background-color:#a4daff;
		font-family: Calibri;
		font-size:1em;		
	}

	#conteneur {
		width:100%;
		background-color:white;
		text-align:justify;
	}
	
	#en_tete {
		height:20vh;
		width:100%;
		text-align: left;
		vertical-align:top;
		background-color:#ffc400;
	}

	#logo_ruches_monaco {
		
		width:50%;
		display:inline-block;
		margin-top:0.5em; 
		margin-left:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;	
	}
	
	#logo{
		width:100%;
	}
	
	#logo-gouv { /* Image du logo */
		border:none;
		width:100%;
		min-width:20px;
		min-height:7px;
		margin-right:10px;
		margin-bottom: 3em;
	}
	
	#logo_gouv_mc {
		width:35%;
		/* display:inline-block; */
		float:right;
		margin-top:0.5em; 
		margin-right:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;
		vertical-align: top;
	}
	
	#presence_social_network {
		text-align:justify;
		margin-left:1em; 
		margin-top:0.5em;
		width:100%;
		display:inline-block;
	}

	#facebook, #linkedin, #twitter {
		width:50px;
	}
	
	#navigation-site {
		font-size: 1em;
		background-color:#ffc400;
		padding-right:2em;
		padding-left:2em;
		margin-top: -1.2em;
		margin-bottom: 1em;
	}
	
	#sommaire_rapide {
		display: none;
		padding : 5px;
		text-align:justify;
		width:90%;
	}
	
	#menu_navigation_rapide {
		font-size:2em;
		cursor:pointer;
	}
	
	#image-menu {
		width:1em;
		margin-right: 2em;
	}

	div.menu-entree {
		text-align:center;
		display:inline-block;
		margin-left:1em;
		margin-right:1em;
		font-size: 1.3em;
	}
	
	a.lien-actif {
		color:yellow;
		font-weight:bold;
		
	}
	
	a.lien-inactif {
		color:white;
		font-weight:bold;
	}

	#pied {
		background-color:black;
		padding:1em;
		height:20vh;
	}

	#mentions {
		display:inline-block;
		padding:10px;
		font-size:1.2em;
	}

	div.copyright {
		font-size:1.2em;
	}

	#mentions a {
		font-size:0.8em;
		font-weight:bold;
		color:lightgrey;
	}

	.accessibilite {
		color:white;
		display:inline-block;
		width:30%;
		float:left;
		padding:10px;
		text-align:left;
		font-size:1.2em;
	}

	.accessibilite a {
		color:yellow;
	}

	.accessibilite h3 {
		color:yellow;
		font-size:12px;
		font-weight:bold;
	}

	.accessibilite li {
		text-align:left;
		list-style-position:inside;
	}
		
	#partenaires {
		text-align:right;
		padding-top:10px;
		width:auto;
		display:inline-block;
	}

	#fpaii {
		width:250px;
	}

	#mairiemc {
		width:150px;
	}

	#news {
		display: inline-block;
		width: 30%;
		padding: 1em;
	}

	h1.actualites-titre {
		font-size:1.2em;	
	}
	
	#accueil {
		margin:auto;
		vertical-align:top;
		display:inline-block;
	}
	
	p.date {
		text-decoration:italic;
		font-weight:bold;
		color:grey;
	}

	div.normal {
		font-size: 1em;
		background-color:white;
		padding-right:2em;
		padding-left:2em;
		vertical-align:top;
	}

	h2 {
		color: red;
		text-align: left;
	}

	h3 {
		color: red;	
	}

	.titre_document {
		text-align:right;
	}

	.mot_gras {
		color:darkred;
		font-weight:bold;
	}

	#texte {
		display:inline-block;
		width:44%;
		vertical-align:top;
		margin:2em;
		font-size:1em;
		margin-right:2.1em;
		text-align:justify;
	}

	#image {
		display:inline-block;
		width:48%;
		vertical-align:top;
		margin:auto;
	}
		
	.div-photo-actualite {
		vertical-align:top;
  		display: inline-block; 
  		width: 45%; 
  		max-width: 600px;
  		margin:1em;
        text-align:center;
	}

	.photo-actualite {
  		width: 100%;
	}
  
   .ruche-icone {
  		width: 20%;
		vertical-align:top;
		text-align:center;
		display:inline-block;
		margin:1em;
	}
		
	.ruche-icone-img {
  		width: 95%;
	}
	
	.ruche-icone-img-bigger {
  		width: 98%;
	}
  
}



/* ****************************************** */
@media only screen and (min-device-width: 1025px) and (max-device-width:1600px) {

	.bannerDisplay {
		display: block!important;
		height: 30vh!important;
	}
	
	
	body {
		color:grey;
		font-size:18px;
		background-color:#a4daff;
		font-family: Calibri;
		font-size:1em;		
	}

	#conteneur {
		width:100%;
		background-color:white;
		text-align:justify;
	}
	
	#en_tete {
		height:55vh;
		width:100%;
		text-align: left;
		vertical-align:top;
		background-color:#ffc400;
	}

	#logo_ruches_monaco {
		
		width:50%;
		display:inline-block;
		margin-top:0.5em; 
		margin-left:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;	
	}
	
	#logo{
		width:100%;
	}
	
	#logo-gouv { /* Image du logo */
		border:none;
		width:100%;
		min-width:20px;
		min-height:7px;
		margin-right:10px;
		margin-bottom: 3em;
	}
	
	#logo_gouv_mc {
		width:30%;
		/* display:inline-block; */
		float:right;
		margin-top:0.5em; 
		margin-right:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;
		vertical-align: top;
	}
	
	#presence_social_network {
		text-align:right;
		margin-right:1em; 
		margin-top:1.5em;
		width:100%;
		display:inline-block;
	}
	
	#facebook, #linkedin, #twitter {
		width:30px;
	}

	#navigation-site {
		font-size: 1em;
		background-color:#ffc400;
		padding-right:2em;
		padding-left:2em;
		margin-top: -1.2em;
		margin-bottom: 1em;
	}
	
	#sommaire_rapide {
		display: none;
		padding : 5px;
		text-align:justify;
		width:90%;
	}
	
	#menu_navigation_rapide {
		font-size:2em;
		cursor:pointer;
	}
	
	#image-menu {
		width:1em;
		margin-right: 2em;
	}

	div.menu-entree {
		text-align:center;
		display:inline-block;
		margin-left:1em;
		margin-right:1em;
		font-size: 1.3em;
	}
	
	a.lien-actif {
		color:yellow;
		font-weight:bold;
	}
	
	a.lien-inactif {
		color:white;
		font-weight:bold;
	}

	#pied {
		background-color:black;
		padding:1em;
		height:40vh;
	}

	#mentions {
		display:inline-block;
		padding:10px;
		font-size:1.1em;
	}

	div.copyright {
		font-size:1.1em;
	}

	#mentions a {
		font-size:0.8em;
		font-weight:bold;
		color:lightgrey;
	}

	.accessibilite {
		color:white;
		display:inline-block;
		width:30%;
		float:left;
		padding:10px;
		text-align:left;
		font-size:1.1em;
	}

	.accessibilite a {
		color:yellow;
	}

	.accessibilite h3 {
		color:yellow;
		font-size:12px;
		font-weight:bold;
	}

	.accessibilite li {
		text-align:left;
		list-style-position:inside;
	}
		
	#partenaires {
		text-align:right;
		padding-top:10px;
		width:auto;
		display:inline-block;
	}

	#fpaii {
		width:255px;
	}

	#mairiemc {
		width:150px;
	}

	#news {
		display: inline-block;
		width: 30%;
		padding: 1em;
	}

	h1.actualites-titre {
		font-size:1.2em;	
	}
	
	#accueil {
		margin:auto;
		vertical-align:top;
		display:inline-block;
	}

	p.date {
		text-decoration:italic;
		font-weight:bold;
		color:grey;
	}

	div.normal {
		font-size: 1em;
		background-color:white;
		padding-right:2em;
		padding-left:2em;
		vertical-align:top;
	}

	h2 {
		color: red;
		text-align: left;
	}

	h3 {
		color: red;	
	}

	.titre_document {
		text-align:right;
	}

	.mot_gras {
		color:darkred;
		font-weight:bold;
	}

	#texte {
		display:inline-block;
		width:44%;
		vertical-align:top;
		margin:2em;
		font-size:1.2em;
		margin-right:2em;
		text-align:justify;
	}

	#image {
		display:inline-block;
		width:46%;
		vertical-align:top;
		margin:auto;
	}
  		
	.div-photo-actualite {
		vertical-align:top;
  		display: inline-block; 
  		width: 45%; 
  		max-width: 600px;
  		margin:1em;
        text-align:center;
	}

	.photo-actualite {
  		width: 100%;
	}
	
	.ruche-icone {
  		width: 20%;
		vertical-align:top;
		text-align:center;
		display:inline-block;
		margin:1em;
	}
		
	.ruche-icone-img {
  		width: 95%;
	}
	
	.ruche-icone-img-bigger {
  		width: 98%;
	}
}


@media only screen and (min-device-width: 1601px) and (max-device-width:2065px) {

	body {
		color:grey;
		font-size:18px;
		background-color:#a4daff;
		font-family: Calibri;
		font-size:1em;		
	}

	#conteneur {
		width:1600px;
		background-color:white;
		text-align:justify;
	}
	
	#en_tete {
		height:48vh;
		width:100%;
		text-align: left;
		vertical-align:top;
		background-color:#ffc400;
	}

	#logo_ruches_monaco {
		
		width:50%;
		display:inline-block;
		margin-top:0.5em; 
		margin-left:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;	
	}
	
	#logo{
		width:100%;
	}
	
	#logo-gouv { /* Image du logo */
		border:none;
		width:100%;
		min-width:20px;
		min-height:7px;
		margin-right:10px;
		margin-bottom: 3em;
	}
	
	#logo_gouv_mc {
		width:30%;
		/* display:inline-block; */
		float:right;
		margin-top:0.5em; 
		margin-right:0.5em;
		word-wrap:break-word;	
		margin-left:0.5em;
		color: white;
		text-align: left;
		vertical-align: top;
	}

	#presence_social_network {
		text-align:right;
		margin-right:1em; 
		margin-top:1em;
		width:100%;
		display:inline-block;
	}
	
	#facebook, #linkedin, #twitter {
		width:40px;
	}

	#navigation-site {
		font-size: 1em;
		background-color:#ffc400;
		padding-right:2em;
		padding-left:2em;
		margin-top: -1.2em;
		margin-bottom: 1em;
	}
	
	#sommaire_rapide {
		display: none;
		padding : 5px;
		text-align:justify;
		width:90%;
	}
	
	#menu_navigation_rapide {
		font-size:2em;
		cursor:pointer;
	}
	
	#image-menu {
		width:1em;
		margin-right: 2em;
	}

	div.menu-entree {
		text-align:center;
		display:inline-block;
		margin-left:1em;
		margin-right:1em;
		font-size: 1.3em;
	}
	
	a.lien-actif {
		color:yellow;
		font-weight:bold;
	}
	
	a.lien-inactif {
		color:white;
		font-weight:bold;
	}
	
	#pied {
		background-color:black;
		padding:1em;
		height:35vh;
	}

	#mentions {
		display:inline-block;
		padding:10px;
		font-size:1.2em;
	}

	div.copyright {
		display:inline-block;
		color:white;
	}

	#mentions a {
		font-size:0.8em;
		font-weight:bold;
		color:lightgrey;
	}

	.accessibilite {
		color:white;
		display:inline-block;
		width:30%;
		float:left;
		padding:10px;
		text-align:left;
		font-size:1.2em;
	}

	.accessibilite a {
		color:yellow;
	}

	.accessibilite h3 {
		color:yellow;
		font-size:12px;
		font-weight:bold;
	}

	.accessibilite li {
		text-align:left;
		list-style-position:inside;
	}
		
	#partenaires {
		text-align:right;
		padding-top:10px;
		width:auto;
		display:inline-block;
	}
	
	#fpaii {
		width:245px;
	}

	#mairiemc {
		width:150px;
	}

	#news {
		display: inline-block;
		width: 30%;
		padding: 1em;
	}

	h1.actualites-titre {
		font-size:1.2em;	
	}
	
	#accueil {
		margin:auto;
		vertical-align:top;
		display:inline-block;
	}

	p.date {
		text-decoration:italic;
		font-weight:bold;
		color:grey;
	}

	div.normal {
		font-size: 1em;
		background-color:white;
		padding-right:2em;
		padding-left:2em;
		vertical-align:top;
	}

	h2 {
		color: red;
		text-align: left;
	}

	h3 {
		color: red;	
	}

	.titre_document {
		text-align:right;
	}

	.mot_gras {
		color:darkred;
		font-weight:bold;
	}

	#texte {
		display:inline-block;
		width:42%;
		vertical-align:top;
		margin:2em;
		font-size:1.2em;
		margin-right:2em;
		text-align:justify;
	}

	#image {
		display:inline-block;
		width:48%;
		vertical-align:top;
		margin:auto;
	}
  		
	.div-photo-actualite {
		vertical-align:top;
  		display: inline-block; 
  		width: 45%; 
  		max-width: 600px;
  		margin:1em;
        text-align:center;
	}

	.photo-actualite {
  		width: 100%;
	}
	
	.ruche-icone {
  		width: 20%;
		vertical-align:top;
		text-align:center;
		display:inline-block;
		margin:1em;
	}
		
	.ruche-icone-img {
  		width: 95%;
	}
	
	.ruche-icone-img-bigger {
  		width: 98%;
	}
}