/**
 * Theme name: Maison Chammas
 * Author: L'Atelier Chammassilia
 * Version:  1.0 
 */

/* SOMMAIRE */
/* 1. Général */
/* 2. Eléments communs - Header, Menu, slider */
/* 3. PAGES STATIQUES
		Maintenance ligne 129
		Accueil ligne 160
		Concept ligne 338
		Services 374
		Contact ligne 433
		Réseau ligne 484
		Archives 525 */


/* 4. BLOG 836 */
/* 5. Recherche */
/* 6. RDV en ligne */
/* 7. Formulaire de contact ligne 1111*/


/* GÉNÉRAL */

@font-face {
    font-family: 'Genericons';
    src: url('font/genericons-regular-webfont.eot');
    src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/genericons-regular-webfont.woff') format('woff'),
         url('font/genericons-regular-webfont.ttf') format('truetype'),
         url('font/genericons-regular-webfont.svg#genericonsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
  box-sizing: border-box;
}

body {
margin : 0;
padding : 0;
width : 100%;
font-family : 'Lato', Sans-serif;
background-color : #000000;
font-size : 1em;
font-weight : 300;
text-align : left;
color : #333;
}

button {
padding : 15px;
color: #F3EFE3;
background-color: #000000;
border: 1px solid #000000;
border-radius:15px;
cursor: pointer;
font: 16px/16px "Georgia", Helvetica, Arial, sans-serif;
overflow: hidden;
}	

#page {
margin : 0 auto 20px auto;
padding : 150px 20px 10px;
width : 80%;
max-width : 1024px;
background-color : #F3EFE3;
overflow : auto;
}
#content-page {
margin : 0 auto;
padding-bottom : 50px;
}
#content-page a {
text-decoration : none;
color : #F3EFE3;
}

#content-page a:hover {
color : #94824D;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
#page {
}
#content-page {
margin : 0 auto;
}
}

@media screen and (min-width: 550px) and (max-width: 767px) {
#page {

}
#content-page {
margin : 0 auto;
}
#h2 {
text-align : center;
}
}
@media screen and (max-width: 549px) {
#page {

}
}

/********************* ELEMENTS COMMUNS *********************/
/***** HEADER *****/

header {
width : 100%;
margin : 0 auto;
position : fixed;
z-index : 100;
top : 0;
background-color : #000;
opacity : 0.85;
}
header .macaron {
position : fixed;
padding : 38px 10px 0 38px;
z-index : 105;
}
#socialmedias {
margin : 15px;
z-index : 105;
}
#socialmedias ul {
margin : 0;
height : 30px;
}
#socialmedias ul li {
padding : 0 10px;
list-style : none;
display : inline;
float : right;
}
#navbar {
width : 100%;
margin-top : 0;
height : 55px;
background : #000;
}

#navbar-border {
width : 100%;
height : 48px;
margin : 20px 0 0 0;
padding : 4px 0;
border-top : 1px solid #94824D;
border-bottom : 1px solid #94824D;
}

#navmob {
	display: none;
}



@media screen and (min-width: 550px) and (max-width: 767px) {
header {
height : 100px;
}
header .macaron {
display : none;
}
header .macaronmob {
width : 100%;
display : flex;
justify-content : space-around;
align-items : center;
left : 0;
margin-top : -30px;
}
#socialmedias ul {
margin-top : 30px;
}
#socialmedias ul {
height : 50px;
}
#socialmedias ul li {
display : flex;
justify-content : space-between;
}
#navbar {
margin-top : -65px;
margin-left : 20px;
}
#navbar-border {
display : none;
}

.macaron {
display : none;
}




}
@media screen and (max-width: 549px) {
header {
height : 100px;
}
header .macaron {
display : none;
}
header .macaronmob {
width : 100%;
display : flex;
justify-content : space-around;
align-items : center;
left : 0;
top : 0;
}
#socialmedias ul {
margin-top : 15px;
}
#socialmedias ul {
height : 50px;
}
#socialmedias ul li {
display : inline;
float : right;
}
#navbar {
margin-top : -65px;
margin-left : 20px;
height : 30px;
}
#navbar-border {
display : none;
}
#navmob {
	display: block;
}

.macaron {
display : none;
}

}


/***** MENU *****/

#menu {
width : 100%;
position : fixed;
display : flex;
justify-content : space-around;
align-items : center;
margin-top : -40px;
text-align : center;
letter-spacing : 1px;
font-size : 0.8em;
font-family : Arial, Helvetica, sans-serif;
text-decoration : none;
}
#menu .menuG {
width : 440px;
text-align : right;
}
#menu .menuD {
width : 440px;
text-align : left;
}
#menu .current_page_item a {
color : #94824D;
}
#menu ul {
padding : 0;
}
#menu ul li {
list-style : none;
display : inline;
padding : 0 10px;
margin : 0;
}
#menu ul li a {
text-decoration : none;
color : #FFF;
}
#menu ul li a:hover {
color : #94824D;
}
.icon {
width : 50px;
height : 50px;
opacity : 0.6;
}
.icon a:hover {
opacity : 0.6;
}
@media screen and (min-width: 768px) {
header .macaronmob {
display : none;
}
.logomob {
display : none;
}

}
@media screen and (min-width: 550px) and (max-width: 767px) {
header .macaronmob img {
width : 250px;
margin-top : 15px;
}
#menu {
display : none;
}
}
@media screen and (max-width: 549px) {
.icon {
width : 20px;
height : 20px;
opacity : 0.6;
}
.macaronmob img {
width : 220px;
margin-top : 30px;
}
.logomob {
display : none;
}
}

/* SLIDER */
#easingslider {
margin : 0 auto;
margin-bottom : 5px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
}
@media screen and (max-width: 767px) {
}


/********************* PAGES SPÉCIFIQUES *********************/

#maintenance {
width:500px;
height:335px;
background-image:url(pics/PinUp5.jpg);
background-repeat:no-repeat;
background-position: center center;
border:4px dashed #457E81;
}


/***** ACCUEIL *****/
#content-page-home {
width:100%;
margin: 0 auto;
padding-bottom:80px;
}

#adresse { margin-bottom:20px;
}

#date {
	width:100%;
	padding-bottom:5px;
	font-family:"Georgia", Times New Roman, Times, serif;
	font-size:1.5em;
	border-bottom:double thick #000;
}


#actu-banner {
	width:100%;	
}

#actu-banner .titre {
	font-family:'Lato', Sans-serif;
	font-size:1.8em;
	font-variant:small-caps;
}

#lastposts{width:100%;}

#lastposts ul li{list-style:none;}

#lastposts .colonne{
	width:240px;
	min-height:250px;
	margin: 0 15px 15px;
	display:inline-block;
	vertical-align:top;
	border-radius: 15px;
	background-color: #000;
}

#lastposts .colonne h2{
font-family: 'Lato', Sans-serif;
font-variant:small-caps;
font-weight:300;
font-size: 1.4em;
line-height:20px;
}

#lastposts .colonne h2 a{color:#F3EFE3;}

#lastposts .colonne h2 a:hover{color:#94824D;} 

.date-lastposts{
	font-size: 1.2em;
    color: #F3EFE3;
	background-color:#000;
	opacity:0.7;
	padding-bottom:5px;
	padding-top:5px;
	margin:0px;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	}


@media screen and (min-width: 768px) and (max-width: 1023px) {

#lastposts .colonne{
	width:60%;
	margin: 15px;
	display:block;
}

}


@media screen and (min-width: 550px) and (max-width: 767px) {

#actu-banner .titre {
	font-size:1.6em;
}

#lastposts .colonne{
	width:60%;
	margin: 15px;
	display:block;
}
}

@media screen and (max-width: 549px) {
#actu-banner .titre {
	font-size:1.4em;
}

#lastposts .colonne{
	width:80%;
	margin: 15px;
	display:block;
}
}


/***** CONCEPT *****/
.img-concept{
width:450px;
height:623px;
margin: 0 15px 0 0;
padding:10px;
float:left;
background-image:url(pics/Norman-Rockwell-Barber.jpg);
background-repeat:no-repeat;
background-size:contain;
}

.h1-concept {
width:450px;
float:right;
margin: 0 40px 50px;
top:0;
font-family:"Georgia", Times New Roman, Times, serif;
font-size:3em;
font-style:italic;
}

.txt-concept {margin: 0 40px;text-align: justify;}

@media screen and (min-width: 768px) and (max-width: 1023px)
{

}

@media screen and (max-width: 767px)
{
#maintenance {
width:100%;
}

}


/***** SERVICES *****/

#h2{

	margin-bottom:15px;
	font-family: "Georgia", Times New Roman, Times, serif;
	font-size:large;
	font-weight:bold;
	color: #457E81;
	
}

#menubox{
	width:800px;
	background:url(pics/design/bottom-post-800.png) no-repeat bottom center;
	padding-bottom:50px;}
	
#pbox{
	width:auto;
	background:url(pics/design/bottom-post-800.png) no-repeat bottom center;
	padding-bottom:80px;}

#prestabox{
	width:100%;
	padding-bottom: 80px;
	overflow: auto;
	background:url(pics/design/bottom-post-800.png) no-repeat bottom center;}
	
.presta1{
	width: 45%;
	height:inherit;
	float:left;
	text-align:left;
}


.presta2{
	width: 45%;
	height:inherit;
	float:right;
	text-align:left;
}

#productbox{
	width:100%;
	padding-bottom: 80px;
	overflow: auto;
	background:url(pics/design/bottom-post-800.png) no-repeat bottom center;}


@media screen and (min-width: 768px) and (max-width: 1023px)
{


}

@media screen and (max-width: 767px)
{
	
.presta1{
	width: 100%;
	float:none;
}

.presta2{
	padding-top: 50px;
	width: 100%;
	float:none;
}

}

/***** CONTACT *****/
#titre{
width:800px;
height:40px;
}

#titre .titre1{
width:450px;
float:left;
}

#titre .titre2{
width:260px;
float:right;
}

#plan{
width:480px;
height:100%;
float:left;
margin:auto;
}

#plan .img1{
width:500px;
height:500px;
background-image:url(pics/Plan-Barbershop.png);
background-repeat:no-repeat;
background-size:contain;
}

#contact{
width:300px;
height:100%;
margin:auto;
float:right;
}


@media screen and (min-width: 768px) and (max-width: 1023px)
{


}

@media screen and (max-width: 767px)
{
/* MENU BURGER */
#navmob {
	display: block;
}
#navmob ul {padding: 0}
#navmob ul li{list-style : none;padding:5px;}


#menuicon {
  display: none;
}

#menuicon-logo {
  cursor: pointer;
  background: black;
  width: 180px;
  display: block;
  color: white;
  text-align: right;
  transform: translateX(-100px);
  padding: 10px;
}

nav {
  display: flex;
  flex-direction: column;
  background: black;
  overflow: hidden;
  width: 180px;
  padding-bottom: 10px;
  border-bottom-right-radius:20px;
  /* Pour que les liens soient "rangés" par défaut */
  transform: translateX(-200px);
}

#menuicon-logo,
nav {
  transition: 0.7s;
}

#menuicon:checked ~ #menuicon-logo,
#menuicon:checked ~ nav {
  transform: translate(0);
  text-align: center;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

nav a:hover {
  color: #94824D;
}


}

/***** RÉSEAU *****/
#id-box{
	width:800px;
	height:100%;
	margin-top:25px;
}

#id-box ul li{list-style:none;}

#id-box .colonne{
	width:236px;
	min-height:285px;
	margin:5px;
	padding:10px;
	display: inline-block;
	float:left;
	background-color:#fff;
	opacity:0.7;
	border-radius:5px;
}

#id-box .colonne h2{
font-family: "Georgia", Times New Roman, Times, serif;
font-style:italic;
font-size: 1.2em;
}

#id-box .colonne p{
font-family: 'Lato', Sans-serif;
font-size:0.8em;
}

@media screen and (min-width: 768px) and (max-width: 1023px)
{

#id-box{
	width:100%;
}

#id-box .colonne{
	width:100%;
	

}
}

@media screen and (min-width: 550px) and (max-width: 767px)
{
#id-box{
	width:100%;
}

}

@media screen and (max-width: 549px)
{
#id-box{
	width:100%;
}

}

/***** ARCHIVES *****/
#searchbar{
	min-height: 300px;
	background: url(pics/design/bottom-post-800.png) no-repeat bottom center;
	padding-bottom:30px;
	}

#searchbar .recherche{
	width: 380px;}

#searchbar .nuage{
	width: 380px;
	min-height: 500px;
	float: right;
	margin-top:-78px;}

#category{
	width:800px;
	padding-bottom: 40px;
	background: url(pics/design/bottom-post-800.png) no-repeat bottom center;}

#category h2{
	color:#457E81;
	font-size:1.2em;
	font-weight:400;
	margin: 0;}


#category a{color:#333;}

#category a:hover{color:#457E81;}


#category ul li{
	list-style:none;
	display:block;}

#category .colonne{
	list-style:none;
	width:230px;
	min-height:280px;
	margin:5px;
	display:inline-block;
	vertical-align:top;
	border-bottom: 1px solid #000;}

#allposts{
width:800px;
float:left;}

#allposts .colonne{
	width:100px;
	min-height:50px;
	margin:5px;
	display:inline-block;
	vertical-align:top;
	border-bottom: 1px solid #000;}

#allposts .colonne h2{
font-family: 'Lato', Sans-serif;
font-variant:small-caps;
font-weight:300;
font-size: 1em;
line-height:15px;}

#allposts .colonne h2 a{color:#000;}

#allposts .colonne h2 a:hover{color:#666;} 

.date-allposts{
	font-size: 0.7em;
    color: #999;
	background-color:#000;
	opacity:0.7;
	padding-bottom:5px;
	padding-top:5px;
	margin-bottom:0px;}

/***** RECHERCHE ARCHIVES *****/
#searchsubmit{
	background-image:url(pics/search.png);
	background-repeat:no-repeat;
	background-color:transparent;
	border:none;
	cursor:pointer;}

#s{
	width:300px;
	border-radius:5px;
	-o-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;}



@media screen and (min-width: 768px) and (max-width: 1023px)
{


}

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


}
	
/***** RENDEZ-VOUS EN LIGNE *****/

#modulerdv{
	padding:0 20px 20px 20px;
	min-height: 1550px;
	text-align:left;
	background:#fff;
	border:1px solid #ccc;
	-webkit-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	-moz-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	-o-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
}

ul.forms { float: left; list-style: none; margin: 0; padding: 0; width: 100%; }
ul.forms li { 
	clear: both; 
	float: left; 
	margin-bottom: 20px; 
	position:relative;}
	
ul.forms label {
	width: 100%;
	height:20px;
	text-align:left;
	font-size: 1.1em;
	font-weight:500;
	color: #457E81;
	opacity:0.7;
	margin-bottom:0;
	padding: 5px 5px;
	cursor: pointer;
	display: block;
	float: left;}

ul.forms input {
	min-width:30px;
	height: auto;
	font: inherit;
	padding: 2px;}
	
ul.forms textarea { height: 180px; width: 280px; font:inherit; padding: 3px; }
ul.forms input:focus, ul.forms textarea:focus { background-color: #f2f3f6; border-color: #457E81; }
.error { color: #f00; }
ul.forms li .error { font-size: 1em; font-style:italic; margin-left: 5px; }
ul.forms li.textarea .error { font-size: 12px; font-style:italic; margin-left: 5px; }
ul.forms li.screenReader { margin-bottom: 0; }
ul.forms .buttons button {
	background: #F3EFE3;
	border: 1px solid #457E81;
	border-radius:5px;
	color: #457E81;
	cursor: pointer;
	font: 16px/16px "Georgia", Helvetica, Arial, sans-serif;
	overflow: hidden;
	padding: 6px 15px 6px 15px;
	font-style:italic;}
ul.forms li.buttons button:hover { color: #069; }
ul.forms li.buttons button:active { left: -1px; position: relative; top: -1px; }
ul.forms li.buttons, ul.forms li.inline { float: left; width: 460px; }
ul.forms li.inline input { width: auto; }
ul.forms li.inline label { display: inline; float:none; width: auto; }






/***** CONTENT BLOG *****/
#content {
width:500px;
float:left;
padding-bottom:20px;
margin-left:20px;
margin-top:-20px;}

#content h2 {
font-family:'Lato', Sans-serif;
font-variant:small-caps;
font-weight:300;
font-size: 1.7em;
line-height:28px;}

.post_content {
font-size: 1em;
color: #555;
padding-bottom:50px;
background: url(pics/design/bottom-post-500.png) no-repeat bottom center;}

#bannerdata{
margin-top:-10px;
height:30px;
background-color:#333;}

.postmetadata {
font-size: 0.8em;
color: #999;
float:left;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;}

.post_comments {
font-size: 0.8em;
color: #999;
float:right;
padding-top:5px;
padding-bottom:5px;
padding-right:10px;}

.post_comments a:hover{color: #fff;}

.post_category {
font-size: 1em;
font-weight:500;
color: #999;
margin-bottom:-20px;}

/***** SIDEBAR *****/
.sidebar {
margin: 0 0 20px 645px;
width:250px;
float:right;
position:fixed;}

.sidebar ul{
list-style-type:none;
margin: 0;
padding: 0 10px;
font-size:0.9em;}

.sidebar h2 {
font-size: 1.2em;
font-variant:small-caps;
color:#333;
border-bottom: 1px solid #699;
padding:5px;}





/***** FOOTER *****/
footer { 
margin : 0 auto ;
padding : 0;
width : 80%;
max-width : 1024px;
overflow : auto;
}

#footer-content {
height:100px;
padding-top:15px;
bottom:0;
font-size: 0.7em;
line-height:15px;
color: #999;
background-color:#000;
clear: both;
opacity:0.85;
}

footer a {
color: #999;
text-decoration:none;}

footer a:hover{
color: #ccc;
text-decoration:none;}

footer p{
text-align: left;
font-size: 1em;
padding: 0 0 20px 20px;}

/***** GENERICONS *****/
.admin-icon:before{
	content: '\f304';
	display:inline;
	margin-right:10px;
    -webkit-font-smoothing: antialiased;
    font: normal 20px/1 'Genericons';
    vertical-align: middle;}

.date-icon:before{
	content: '\f303';
    display:inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 24px/1 'Genericons';
    vertical-align: middle;}

.comments-icon:before{
	content: '\f300';
	display:inline;
	margin-right:10px;
    -webkit-font-smoothing: antialiased;
    font: normal 20px/1 'Genericons';
    vertical-align: middle;}

/***** COMMENTAIRES *****/
#cadre_commentaires {
	background-color:#F3EFE3;
	width:800px;}

.avatar{
float: left;
margin-right: 15px;
margin-top:15px;
width: 50px;
height: 50px;
border: 1px solid #000;
border-radius: 50%;
-o-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;}


.comments-template{	
background-color:#F3EFE3;
padding-bottom:20px;}

.comments-author{ }

.comments-author p{color:#933;}

.comments-template ol{
list-style: none;
margin: 0;
padding: 0;}

.comments-template ol p{
font-family: 'Lato', Sans-serif;
font-size: 0.9em;
padding-left:65px;}

.comments-template ol li{
padding: 15px 5px 10px 5px;
line-height: 15px;
border-bottom: 1px dashed #457E81;}

.comments-template h2, .comments-template h3{
text-align:center;
font-size: 1.2em;
font-variant:small-caps;
color: #457E81;
background-color:#000;
opacity:0.7;
margin-top:-20px;
margin-bottom:0;
padding: 5px 0;}

.commentmetadata{
font-size: 1em;
font-variant:small-caps;}

.comments-template p.nocomments{
padding: 0;}

.comments-template textarea{
font-family: Arial, Helvetica, Sans-serif;
font-size: 0.9em;
border-color:#457E81;
border-radius: 5px;
opacity:0.8;}

#respond{margin-top:15px;}

.comments-template button {
	background: #fff;
	border: 1px solid #457E81;
	border-radius:5px;
	color: #457E81;
	cursor: pointer;
	font: 16px/16px "Georgia", Helvetica, Arial, sans-serif;
	overflow: hidden;
	padding: 6px 15px 6px 15px;
	font-style:italic;}

/***** NAVIGATION *****/
.navigation{
	width:500px;
	margin:15px auto;
	padding-bottom:60px;
	font-variant:small-caps;}


.navigation-after{
	width:240px;
	float:left;}

.navigation-before{
	width:240px;
	float:right;}

.navigation a{
	font-size:1em;
	color:#333;}

.navigation a:hover{
	text-decoration:none;
	color:#666;
	font-weight:100;}

/***** PAGINATION *****/
 
.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:0.8em;
line-height:13px;
}
 
.pagination span, .pagination a {
display:block;
float:left;
margin: 4px 4px 4px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#999;
background: #333;
}
 
.pagination a:hover{
color:#fff;
background: #666;
}
 
.pagination .current{
border-radius: 50%;
-o-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
padding:6px 9px 5px 9px;
background-color:#457E81;
color:#fff;}
 

/***** LINKS *****/

a {color: #457E81;text-decoration: none;}

a:hover {color: #000;}

#content h2 a{font-size: 1.2em; font-family:'Lato', Sans-serif; color: #333;}

#content h2 a:hover{color: #666;}

.post_content a { }

.post_content a:hover { }

.sidebar a:hover {text-decoration: none;}

/***** FORMULAIRE DE CONTACT *****/
#formulaire {
	width:300px;
	float:right;
	margin-top:0;
	margin-right:10px;}

.screenReader { left: -9999px; position: absolute; top: -9999px; }
.thanks { background: #F2F3F6; border: 2px solid #457E81; padding:10px; }
.thanks h1 { font-family:"Georgia", Times New Roman, Times, serif; font-size: 1.2em;
font-style:italic; font-size: 1.2em; color:#457E81; }
.thanks p { font-family:"Georgia", Times New Roman, Times, serif; }


ol.forms { float: left; list-style: none; margin: 0; width: 100%; }
ol.forms li { 
	clear: both; 
	float: left; 
	margin-bottom: 10px; 
	position: relative;
	width: 100%;
}
ol.forms label {
	width: 280px;
	height:20px;
	text-align:left;
	font-size: 1.1em;
	font-variant:small-caps;
	font-weight:500;
	color: #457E81;
	background-color:#000;
	opacity:0.7;
	margin-bottom:0;
	padding: 5px 5px;
	cursor: pointer;
	display: block;
	float: left;
}

ol.forms input, ol.forms textarea {
	width: 280px;
	height: 15px;
	font: inherit;
	padding: 3px;
	
}
ol.forms textarea { height: 180px; width: 280px; }
ol.forms input:focus, ol.forms textarea:focus { background-color: #f2f3f6; border-color: #699; }
.error { color: #f00; }
ol.forms li .error { font-size: 12px; font-style:italic; margin-left: 5px; }
ol.forms li.textarea .error { font-size: 12px; font-style:italic; margin-left: 5px; }
ol.forms li.screenReader { margin-bottom: 0; }
ol.forms .buttons button {
	background: #fff;
	border: 1px solid #699;
	border-radius:5px;
	color: #699;
	cursor: pointer;
	font: 16px/16px "Georgia", Helvetica, Arial, sans-serif;
	overflow: hidden;
	padding: 6px 15px 6px 15px;
	font-style:italic;

}
ol.forms li.buttons button:hover { color: #069; }
ol.forms li.buttons button:active { left: -1px; position: relative; top: -1px; }
ol.forms li.buttons, ol.forms li.inline { float: left; width: 460px; }
ol.forms li.inline input { width: auto; }
ol.forms li.inline label { display: inline; float:none; width: auto; }