/* Theme Name: charpentiers-uzes
Author: Lucie Testud
Author URI: http://www.charpentiers.fr/
*/

/* 
COULEUR
Vert : #97bd16
Vert foncé : #77950f
blanc : #fdf9ed
marron : #715d44
*/

html, body{ 
height: 100%;
width: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
text-align: center;	
}

body,html,ul,li,ol,h1,h2,h3,h4,a,a:visited,a:active,a:focus,a:link,a:hover,img{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
outline: none;
}

ul.liste li{
padding: 0 0 0 15px;
}


@media screen and (max-width: 991px){ 
.res-col-padding{
padding-top: 100px;	
}
}

/* 
@media screen and (max-width: 991px){
.col-lg-12, .col-md-12, .col-sm-12, .col-xs-12, 
.col-lg-11, .col-md-11, .col-sm-11, .col-xs-11, 
.col-lg-10, .col-md-10, .col-sm-10, .col-xs-10, 
.col-lg-9, .col-md-9, .col-sm-9, .col-xs-9, 
.col-lg-8, .col-md-8, .col-sm-8, .col-xs-8, 
.col-lg-7, .col-md-7, .col-sm-7, .col-xs-7, 
.col-lg-6, .col-md-6, .col-sm-6, .col-xs-6, 
.col-lg-5, .col-md-5, .col-sm-5, .col-xs-5, 
.col-lg-4, .col-md-4, .col-sm-4, .col-xs-4, 
.col-lg-3, .col-md-3, .col-sm-3, .col-xs-3,
.col-lg-2, .col-md-2, .col-sm-2, .col-xs-2, 
.col-lg-1, .col-md-1, .col-sm-1, .col-xs-1{
padding: 0 0 100px 0;	
}
*/

img{
border: none;
}

.thumbnail{
background: none;
border: none;
}

img.thumbnail{
margin: 0 auto 30px auto;
}

.video{
width: 700px;
margin: 0 auto;
}

@media screen and (max-width: 991px){ 
.video{
width: 100%;
}
}

.clearfloat{
clear: both;	
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% EFFETS GÉNÉRAUX CONTENU %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
.box-link:hover{	
opacity: 0.6;
}

/* -------------- effet box SERVICES --------------- */
.box{	
padding: 60px 70px 0 70px;
height: 500px;
}

.box img{	
margin: 0 0 25px 0;
}

@media screen and (min-width: 992px) and (max-width: 1300px){ 
.box{	
padding: 60px 0;
height: 550px;
}

.box img{	
margin: 0 0 20px 0;
}
} 

@media screen and (max-width: 991px){ 
#blocs-services .col-md-4 {
padding: 100px 0;
}

.box{	
height: auto;
}

.box img{	
margin: 0 0 20px 0;
}
}

/* ------------ effet box PRODUIT AKTERRE----------- */
.box-lien{
padding: 20px 0;
border : 2px solid #97bd16;
}

/* ------------- effet box MENUISERIE -------------- */
.box-menuiserie{
padding: 100px 30px 0 30px;
height: 250px;
}

/* ---------------------- fond GALERIE -------------- */
.galerie{
background-color: #383838;	
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% NAV %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
.gilidPanel-opener a{
padding: 10px 15px;	
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% HEADERS %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* -------------- ACCEUIL ----------------- */
/* BACKGROUND */
.modele-accueil{
background-image: url('images/accueil/fond-landing.jpg');	
background-position:center;
background-repeat: no-repeat;
background-size: cover;	
height: 100%;		
}

/* LOGO */
.modele-accueil .logo{
display: block;
height: 192px;
width: 192px;
position: absolute;
right: 40px;
bottom: 200px;	
}

.modele-accueil .logo img{
width: 100%;
}

/* TITRE */
.modele-accueil h1{
font-style: italic;
text-align: right;	
font-size: 55px;
position: absolute;
right: 50px;
bottom: 70px;
}

@media screen and (min-width: 900px) and (max-width: 1030px){
/* LOGO */
.modele-accueil .logo{
height: 100px;
width: 100px;
bottom: 190px;	
}

/* TITRE */
.modele-accueil h1{
font-size: 45px;
}
}

@media screen and (min-width: 481px) and (max-width: 899px){
/* LOGO */
.modele-accueil .logo{
height: 90px;
width: 90px;
bottom: 190px;	
}

/* TITRE */
.modele-accueil h1{
font-size: 35px;
}
}

@media screen and (max-width: 480px){ 
/* LOGO */
.modele-accueil .logo{
height: 90px;
width: 90px;
right: 20px;
bottom: 150px;	
}

/* TITRE */
.modele-accueil h1{
font-size: 25px;
right: 20px;
}
}

/* ---------------- PAGES ----------------- */
/* BACKGROUND */
.modele-page{
background-image: url('images/header-page/fond-header.jpg');	
background-position:center;
background-repeat: no-repeat;
background-size: cover;	
height: 450px;
}

/* LOGO */
.modele-page .logo{
display: block;
height: 150px;
width: 150px;
position: absolute;
top: 50px;	
right: 40px;		
}

.modele-page .logo img{
width: 100%;
}

/* TITRE */
.modele-page h1{
width: 100%;
text-align: center;	
font-size: 30px;
position: absolute;
top: 220px;	
}

.modele-page h1:before{
content: ""; 
display: block;
height: 32px;
width: 162px;
margin: 0 auto 50px auto;
background-image: url('assets/ico-vert.png');
background-repeat:no-repeat;
}

@media screen and (max-width: 767px){
/* LOGO */
.modele-page .logo{
display: block;
position: inherit;
height: 100px;
width: 100px;
margin: 0 auto;	
padding: 20px 0 20px 0;	
}

/* TITRE */
.modele-page h1{
font-size: 25px;
position: inherit;
}

.modele-page h1:before{
margin: 50px auto 30px auto;
}
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% TYPO %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* ------------- coul texte --------------- */
.texte-vert{
color: #97bd16;		
}

.texte-blanc{
color: #fdf9ed;	
}

/* ------------- texte align -------------- */
.res-text-left{
text-align: left;		
}

.res-text-right{
text-align: right;	
}

@media screen and (max-width: 993px){
.res-text-left{
text-align: center;		
}

.res-text-right{
text-align: center;	
}
}

/* ---------------- typo ------------------ */
h1{
font-weight: 900;	
color: #fdf9ed;
text-transform: uppercase;
}

h2{	
font-weight: 700;
font-size: 30px;
padding: 0 0 50px 0;
text-transform: uppercase;
}

h3{	
padding: 0 0 20px 0;
}

@media screen and (max-width: 767px){
h2{
font-size: 25px;	
}
}

.lead{
font-size: 23px;
font-weight: 300;
}

p{	
font-size: 18px;
padding-left: 100px;
padding-right: 100px;
}

/* --- Map page contact--- */
.gm-style-iw p{
padding-left: 0px;
padding-right: 0px;	
}

.row p{	
padding-left: 20px;
padding-right: 20px;
}

.p-accent{
font-weight: bold;
}

@media screen and (min-width: 768px) and (max-width: 992px){  /* --- Tablettes portrait seulement --- */
p, h1, h2, h3, .lead{	
padding-left: 40px;
padding-right: 40px;
}
}

@media screen and (max-width: 767px){ /* --- Mobiles--- */
p, h1, h2, h3, .lead{	
padding-left: 30px;
padding-right: 30px;
}
}

.small{
font-size: 14px;	
}

.sidenote{
font-size: 14px;	
padding: 40px 0;
border-top: 1px solid;
border-bottom: 1px solid;
}

/* LIENS */
a{
font-weight: bold;	
font-size: 18px;		
}

/* LIENS BOUTONS */
a.btn{
font-weight: 400;			
padding: 10px 15px;
margin: 30px 0 0 0;
text-transform: uppercase;	
}

a.btn:hover{
background-color:transparent;	
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% SECTIONS %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* --------------- général ----------------- */
.section-padding{
padding: 100px 0;
}

/* ------------- SECTION VERT -------------- */
.vert{
background-color: #97bd16;
color: #fdf9ed;	
}

/* typo */
.vert h2:before{
content: ""; 
display: block;
height: 32px;
width: 162px;
margin: 0 auto 50px auto;
background-image: url('assets/ico-blanc.png');
background-repeat:no-repeat;
}

/* liens */
.vert .btn{
background-color: #fdf9ed;
color: #97bd16;
text-decoration:none;
}

.vert .btn:hover{	
border: 1px solid #fdf9ed;
color: #fdf9ed;	
}

.vert a{	
color: #fdf9ed;
text-decoration:underline;
}

.vert a:hover{	
opacity: 0.6;
}

/* ------------- SECTION BLANC ------------- */
.blanc{
background-color: #fdf9ed;
color: #715d44;	
}

/* TYPO */
.blanc h2:before{
content: ""; 
display: block;
height: 32px;
width: 162px;
margin: 0 auto 50px auto;
background-image: url('assets/ico-vert.png');
background-repeat:no-repeat;
}

/* LIENS */
.blanc .btn{
background-color: #97bd16;
color: #fdf9ed;
}

.blanc .btn:hover{	
border: 1px solid #97bd16;
color: #97bd16;	
}

.blanc a{	
color: #97bd16;	
}

.blanc a:hover{	
opacity: 0.6;
}

/* ------------- SECTION VERT foncé -------- */
.vert-fonce{
background-color: #77950f;
color: #fdf9ed;	
}

/* typo */
.vert-fonce h2:before{
content: ""; 
display: block;
height: 32px;
width: 162px;
margin: 0 auto 50px auto;
background-image: url('assets/ico-blanc.png');
background-repeat:no-repeat;
}

/* liens */
.vert-fonce .btn{
background-color: #fdf9ed;
color: #77950f;
}

.vert-fonce .btn:hover{	
border: 1px solid #fdf9ed;
color: #fdf9ed;	
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% PORTFOLIO %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* ---- PAGE PORTFOLIO MOSAIQUE ------------ */
.bloc-contenu-portfolio{
padding: 20px 0;	
}

.bloc-contenu-portfolio a:hover{
opacity:1;	
}

.marge-galerie-projet{
padding: 20px 0;		
}

/* ------------- SINGLE PAGE --------------- */
.single-post{
text-align: left;
}

.single-post span{
font-size: 22px;
text-align: left;
color: #97bd16;
}

.single-post a{
font-family: 'Lato', sans-serif;	
color: #97bd16;
font-weight: bold;	
font-size: 18px;
}

.single-post a:hover{
opacity: 0.6;	
}

.single-post .btn{
font-weight: 400;			
padding: 10px 15px;
margin: 30px 0 0 0;
text-transform: uppercase;
background-color: #97bd16;
color: #fdf9ed;
text-decoration:none;
}

.single-post .btn:hover{
background-color: transparent;		
border: 1px solid #fdf9ed;
color: #fdf9ed;	
}
.single-post footer{
text-align: center;
}
/* ------------- CUBEFOLIO --------------- */
.single-page-top{
padding-top: 50px;
padding-bottom: 50px;
}

.cbp-l-project-desc-text, .cbp-l-project-desc-text p, .cbp-l-project-details-list strong{
font-size: 14px;
text-align: left;
}

.cbp-l-project-desc-text p {
padding-left: 0px;
padding-right: 0px;	
}

.cbp-l-project-desc-title span, .cbp-l-project-details-title span{
font-size: 22px;
text-align: left;
}

.cbp-l-project-desc-title, .cbp-l-project-details-title, .cbp-l-project-details-list{
text-align: left;
}

.cbp-l-project-desc-text a{
color: #97bd16;
font-size: 14px;	
}

.cbp-l-project-desc-text a:hover{
opacity: 0.6;	
}

.cbp-l-project-desc-text .btn{
font-weight: 400;			
padding: 10px 15px;
margin: 30px 0 0 0;
text-transform: uppercase;
background-color: #97bd16;
color: #fdf9ed;
text-decoration:none;
}

.cbp-l-project-desc-text .btn:hover{
background-color: transparent;		
border: 1px solid #fdf9ed;
color: #fdf9ed;	
}

div.cbp-popup-navigation{
z-index: 9999999;	
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% LIVRE D'OR / COMMENTAIRES %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* 
COULEUR
Vert: #97bd16;
Vert foncé: #77950f;
blanc: #fdf9ed;
marron: #715d44;
*/

/* ------------------------------------- COMMENTAIRES ----------------------------------------- */
/*ESSEMBLE ZONE COMMENTAIRE*/
.post-comments{
margin: 0 auto;
width: 90%;	
}

/* ----------------- AFFICHAGE DES COMMENTAIRES / RÉPONSES ---------------- */
/* ---ensemble affichage commentaire / réponse -----*/
/*phrase : "tant de commentaires sur la page" */
h3#comments{
display: none;
}

.comment-body{
margin: 40px 0 20px 0;
padding:30px 20px;
background-color: #fdf9ed;		
border-radius: 20px;
color: #97bd16;
}

/* ------------- Contenu du commentaire ---------- */
.comment-body p{
padding :50px 0;
width: 75%;
margin: 0 auto;
}

.comment-body a{
color: #77950f;
text-decoration: none;
font-weight: normal;
}

ul.children {
opacity: 0.9;
}

/* ------------ Auteur du commentaire -------------*/
.comment-author{
padding: 10px 10px;
width: 90%;
margin: 0 auto;
background-color: #97bd16;		
border-radius: 20px;
color: #fdf9ed;
}

/* nom auteur */
.fn a{
font-size : 18px;
}

.fn {
font-weight: bold;
font-size : 20px;
}

/* ..dit: */
.says {
}

/* date et mofifier: */
.comment-meta {
width: 88%;
margin: 0 auto;	
font-size: 16px;
text-align: right; 	
}

.comment-meta a{
font-size: 16px;
font-weight: normal;	
}

/* ------ Bouton répondre au commentaire ---------- */
.reply {
display: none;
}

/* --------------------- ECRIRE LE COMMENTAIRE ------------------------ */
/*Ensemble*/
#respond{
margin: 30px 0 0 0;
}

#respond h3:before{
content: ""; 
display: block;
height: 32px;
width: 162px;
margin: 70px auto 50px auto;
background-image: url('assets/ico-blanc.png');
background-repeat: no-repeat;
}

#respond h3{
font-weight: 700;
font-size: 30px;
padding: 0 0 50px 0;
text-transform: uppercase;
}

#respond a{
}

/* ------ zone formulaire réponses -----------*/
#commentform{
margin: 20px 0 10px 0;
}

#commentform label{
display: block;
text-align: left;
}

#commentform input{
display: block;
height: 30px;
width: 30%;
color: #97bd16;
padding: 0 10px;
}

@media screen and (max-width: 992px){ 
#commentform input{
width: 90%;
margin: 0 auto;
}
} 

/* ------------ zone textarea ---------------- */
#comment{
margin: 20px 0 0px 0;
width: 100%;
height: 200px;	
color: #97bd16;
padding: 0 10px;
}

/* --------------- submit ---------------------- */
#submit{
margin: 20px 0 50px 0;	
padding: 0px 20px;
background-color: #ffff;
color: #97bd16;	
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% PAGES LIENS %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
#page-liens h3{
text-transform: uppercase;	
}

#page-liens a.btn{
text-transform: none;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% TABLEAU %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
.akterre-tableau{
font-size: 16px;
text-align: left;
margin: 0 auto;
padding: 30px;
border-left: 2px solid;
}

@media screen and (max-width: 991px){
.akterre-tableau{
margin: 50px auto;
}
}

/* LIGNES */
.akterre-tableau tr{
padding: 15px 0;
}

/* COLONNES */
.akterre-tableau td{
padding: 0 0 0 20px;
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% FOOTER %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* ------------- SISEBAR/NAV --------------- */
footer .vert-fonce h4.titre-widget{
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
color: #fdf9ed;	
}

footer .vert-fonce h4.titre-widget:after{
content: ""; 
display: block;
height: 6px;
width: 80px;
margin: 10px auto 20px auto;
background-color: #fdf9ed;
}

footer .vert-fonce .widget .menu-item a{	
font-size: 14px;
font-weight: normal;
color: #fdf9ed;	
text-align: center;
}

footer .vert-fonce .widget a:hover{	
opacity: 0.7;
}

@media screen and (max-width: 991px){ 
footer .vert-fonce{
display: none;
}
}

/* -------------- PARTENAIRES -------------- 
footer .partenaires{
margin: 0 auto;		
}

footer .partenaires img{
width: 90%;	
}

@media screen and(min-width: 768px) and (max-width: 992px){ 
footer .partenaires img{
width: 60%;	
}
}*/
.peinture-ecologique-footer-img{
width:414px; margin:0 auto;	
}

/* -------------- WIDGET PETROL ------------ */
.petrol{
width: 140px;
height: 150px;
margin: 0 auto;	
}

/* -------------- COORDONNÉES -------------- */
footer .logo{
background-image: url('assets/logo-60.png');	
background-position: center;
background-repeat: no-repeat;
background-size: cover;	
height: 60px;	
width: 60px;	
margin: 0 auto;
}

footer .lien-contact a:hover{
color: #715d44;	
text-decoration: underline;
}

/* ------------------ LEGAL ---------------- */
footer .legal{
font-size: 14px;		
}

footer .legal a{
font-weight: normal;
color: #fdf9ed;		
}

footer .legal a:hover{	
opacity: 0.7;
}