/* base commune*/
		@font-face {
    font-family: 'Merienda';
	src: local("Merienda-Regular"), url(../fonts/Merienda-Regular.ttf) format("truetype");
	font-weight: normal;
    font-style: normal;
	}

@media screen and (max-width: 599px){
	
	body { font-size: 1em;}

	h1 { font-size: 2em; text-align: center; font-weight: lighter; }

	h2 { font-size: 1.5em; text-align: center; font-weight: lighter; line-height: 1.7em; }

	h3 { text-align: center; line-height: 1.4em; font-size: 1.2em; font-weight: lighter; }
.maxwidth {max-width: 95%;}
#galerie {max-width: 100%; display: flex; flex-wrap: wrap; margin: 0 auto; height: auto;}
#galerie>* {
  flex: 1 1 100%;
}

}
    
@media screen and (min-width: 600px){
	
	body { font-size: 1.1em;}

	h1 { font-size: 2.8em; text-align: center; font-weight: lighter; }

	h2 { font-size: 1.8em; text-align: center; font-weight: lighter; line-height: 1.5em; }

	h3 { text-align: center; line-height: 1em; font-size: 1.4em; font-weight: lighter; }
	
.flex {display: flex; max-width: 100%; justify-content: space-around; flex-wrap: wrap;}
#texte {max-width: 800px;}

.maxwidth {max-width: 85%;}
#galerie {max-width: 100%; display: flex; flex-wrap: wrap; justify-content: space-around; margin: 0 auto; height: auto;}
#galerie>* {
  flex: 1 1 300px;
}
}

html, body {    font-family: 'Merienda-Regular', cursive;}

.galerie { max-width: 1200px; height: auto;  margin: 0 auto;  display: flex;   flex-wrap: wrap; justify-content:  space-around; }
.button {
   background-color:#c6d8e5; 
   background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
   background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
   border-radius: 6px;
   margin-bottom:2px;
   box-shadow: 3px 3px 3px #999;
   border:solid 2px #333A40
}

#flexbox {display: flex; flex-wrap: wrap; max-width: 100%; justify-content: space-evenly; margin: auto 0;}

.comm-ferm {display: flex; justify-content: space-between;}

.commentaire {border: solid 3px darkgrey; border-radius: 10px; background-color: moccasin; padding: 5px;}

#contentfb {background-color: yellow; border: solid 2px blue;border-radius: 10px; margin: 0 auto;}

#general {max-width: 95%; margin: 0 auto;}

#bandinf {
	position: relative;
	font-size: 0.7em;
	/*float: center;*/
	top: 2px;
	right: 0; left : 0; margin: auto;
	/*width: 90%;
	height: 20px;*/
	border: solid 2px black;
	border-radius: 5px;
	text-align: center;
	background-color: darkgray;
	color: white;
	
}

#menu { display: flex;
		flex-wrap: wrap;
		width: 100%; 
		justify-content: space-around;
	}

.bandhaute { text-align: center; vertical-align: middle; top:10px;}

.cyan { border: 2px inset orange; padding: 3px; background: cyan; color: green; border-radius: 50% 20% / 10% 40%; font-family: cursive; white-space: nowrap;}

.cadretitre { border: solid 3px white; border-radius: 10px; margin: 10px; padding: 15px;}
/*page index*/

#index {position: relative; display: flex; flex-wrap: wrap; width: 100%;  justify-content: space-evenly; margin: auto; top: 40px; }
#bloctitre {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
#boxart { position: relative; display: flex; flex-wrap: wrap; justify-content: space-evenly;}

.boxart1 { border: solid 1px red; border-radius:10px; max-width: 300px; padding: 5px;}
.boxart { border: solid 1px blue; border-radius:10px; max-width: 250px; padding: 5px;}

.lire {font-size: 0.8em; text-align: right;}

.maj {font-size: 0.5em;}
	
#box {
        position: relative;
		display: flex;
        flex-wrap: wrap;
		width: 90%; 
		min-height: 250px; 
		left:0; 
		right: 0; 
		margin: auto; 
		padding: 50px;
		
    }
	
.blog {
		position: relative;
		flex: 1;
		font-size: 0.8em;
  		top:0; 
		bottom:15px;
		left:0; 
		right: 0; 
		margin: auto;
		min-height: 180px;
		min-width: 247px;
		max-height: 180px;
		max-width: 247px;
		border: solid 5px gray;
		border-radius: 10px;
		text-align: left;
		justify-content: space-between;
		font-weight: bold;
}
.blogfond {
		background-repeat: no-repeat;
		background-position: top center;
}
.blanc {
		position: relative;
		width: 11px;
		justify-content: space-between; 
}
.link { color: #FF0000; text-decoration: underline overline #FF3028; font-size: 1.2em; background-color: white;}

.avap {background-color: gainsboro; width: 70%; text-align: center;}

.sp {
	padding: 5px;
	height: 150px;
	text-align: center;
	font-size: 0.8em;
}
blockquote {
text-align: left;
margin-left: 40px;
font-family:"Segoe Print", "Times New Roman", Verdana;
padding-left: 20px;
color: blue;
border-left: solid 3px blue;
font-style: italic;	
}
/*page blog*/
body {background-color: lightgray; max-width: 100%; margin: 0 auto;}
#resume {width: 90%; margin: auto; color: white; background-color: DimGray; display:flex; flex-wrap: wrap; padding: 5px;}
.resume {border: solid 1px blue; border-radius: 5px; padding: 5px; width: 200px;}
.boxavapr {
  display: flex;
}
.droite {
    margin-left: auto;
	}
.arrondie  {border-radius: 15px; max-width: 250px; height: auto;}

.cadrelogo { border-radius: 20px; max-height: 270px; max-width: 470px; overflow: hidden;} 
/* text-align: center; display: flex; flex-wrap: wrap; justify-content: space-evenly;*/

.img100 { width: 100%; height: 100%; }
.imgacc { max-width: 45%; height: auto; }
.imgadaptable { max-width: 100%; height: auto; border-radius: 15px;}

	
#boxaffiche { position: relative; margin: 0 auto; border: 1px solid gray; border-radius: 15px; padding: 15px; align-items: center; justify-content: center; background-color: white;  }

#fleximages {display: flex; flex-wrap: wrap;}

h1 {text-align: center;}
h4 {text-decoration: blue;}

.cadre {border: 2px solid blue; border-radius: 15px; margin: 0 auto; padding: 15px; max-width: 250px; } /* height: 280px; */

.affich300 {max-width: 350px; margin: 0 auto; border-radius: 15px;}
			
img {max-width: 680px; border-radius: 5px;}

.poeme {padding: 12px;}

#galerie {display: flex; flex-wrap: wrap; justify-content: space-evenly;}

/*page connexion, nouveaux billets*/

.legende {font-family: arial; font-size: 0.8em; border-bottom: solid 1px black; border-left: solid 1px black; border-right: solid 1px black; border-radius: 3px; background-color: #EFEFFB;}
	
#form {
  		top:0; 
		bottom:0;
		left:0; 
		right: 0; 
		margin: auto;
		height: 250px;
		width: 500px;
		border: solid 5px gray;
		border-radius: 10px;
		text-align: left;
		
}

.none{font-size: 0.8em; width: 70px; border: solid 1px gray; border-radius: 5px;}
.input {
  font-family: "Liberation Sans", sans-serif;
  border: solid 1px black;
  border-radius: 5px;
  padding: 1px;
  width: 25px;
  background: LightSalmon;
}
.submit {
  font-family: "Liberation Sans", sans-serif;
  border: solid 2px blue;
  border-radius: 5px;
  padding: 5px;
  margin-left: 10px;
  background: Cyan;
}

#art {
	width: 100%;
	border: 2px solid gray;
	border-radius: 10px;
	/*overflow-y: scroll;*/
	bottom: 0;
}
table {
  border-collapse: collapse;
  border: none;
  /*border: 1px solid gray;*/
}

/*td {
  border: 1px solid gray;
  padding: 5px;
  border: none;
}*/
textarea {
  display : block;
  padding : 10px;
  margin  : 0 100px 0 0;
  width   : 600px;
  height  : 300px;
  overflow: auto;
}
 .rightsign  {
	font-family: arial;
	text-align: right;
	padding: 20px;
	color: blue;
}
.leftcomm {
	font-family: arial;
	border-top-color: blue;
	text-align: left;
	padding: 20px;
	color: blue;
} 	
.font08 {font-size: 0.8em; text-align: center;}
.imgh {max-width: 402px;}
.imgw {max-width: 402px;}
.floatl {float: left; padding: 10px; max-width: 100%; border-radius: 5px;}
.floatr {float: right; padding: 10px; max-width: 100%; border-radius: 5px;}
/*style wordpress, reproduction des articles*/
  	
.has-text-align-center {text-align: center;}
.has-text-align-right {text-align: right;}
.has-text-align-left {text-align: left;}
.has-text-align-justify {text-align: justify;}

 .iframeresp { 
overflow:hidden; 
padding-bottom:56.25%; 
position:relative; 
height:0;
}

.iframeresp iframe {
left:0; 
top:0; 
height:100%;
width:100%;
position:absolute;
}

.constant {background-color: white; border: solid 2px blue; border-radius: 10px; padding: 0 10px 0 10px;  font-size: 1.2em; text-align: center;}
.photo400 {max-width: 400px; height: auto; border-radius: 15px;}