/*
Theme Name: kode
Theme URI: http://www.kode-design.com
Author: Michael Gerard
Author URI: http://www.michaelgerard.be
Description: This is an advanced theme created by kode - communication agency - Liege, BE.
Version: 1.0
License: GNU General Public License
License URI: none
Tags: advanced kode communication agency michael gerard
*/
@CHARSET "UTF-8";

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
	{
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

:focus { /* remember to define focus styles! */
	outline: 0;
}

ol,ul {
	list-style: none;
}

table { /* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}

caption,th,td {
	font-weight: normal;
	text-align: left;
}

a img {
	border: 0;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
	{
	display: block;
}

/*------------- GENERAL DESIGN ------------------------------------------------------------------------------------------------- GENERAL DESIGN ---------------- */
body {
	background-color: white;
	color: black;
	font: 300 13px/1.9 Georgia, Helvetica, Arial, sans-serif; 
	position: relative;
	letter-spacing: 1px;
}

header {
	width: 231px;
	background-color: #fff;
	position: relative;
	float: left;
	padding-top: 20px;
	position: fixed;
}

#headerMarginTop {
/* 	height: 25px; */
}

#headerContainer {
	background-color: #fff;
	padding-left: 20px;
}

#main {
/* 	width: 678px; */
	background-color: #fff;
	position: relative;
	float: right;
	padding: 34px 43px 0px 43px;
	border-left: 2px #bababa solid;
}

#mainMarginTop {
/* 	height: 25px; */
}

#mainContainer,#footerMarginTop,#push,body {
	background-color: #fff;
	height: 100%;
}

footer {
	width: 923px;
	text-align: right;
	clear: both;
	margin: auto;
/* 	padding-right: 86px; */
		height: 50px; PUSHER CONFLICT
	/* 	margin-top: 25px; PUSHER CONFLICT*/
}

footer,#push {
/* 	height: 100px; CONSIDER FOOTER PADDING-TOP + ALSO CHANGE WRAPPER NEGATIVE MARGIN */
/* 	clear: both; */
}

#footerMarginTop {
	height: 0px;
}

#footerContainer {
	background-color: #fff;
}

#wrapper {
/* 	height: auto !important; */
/* 	margin-bottom: -100px; */
/* 	min-height: 100%; */
	width: 1009px;
	margin: auto;
	padding-top: 8px;
}

#headerMargins,#mainMargins,#footerMargins {
	margin: auto;
/* 	width: 1040px; */
}
#footerMargins{
	width: 1009px;
	margin: auto;
}

/* #headerContainer,#mainContainer, */
#footerContainer {
/* 	min-width: 954px; */
/* 	margin: auto; */
/* 	clear: both; */
	
	margin-bottom: 30px;
}

html,body {
	height: 100%;
}
/*------------- HEADER/FOOTER ------------------------------------------------------------------------------------------------- HEADER/FOOTER ---------------- */
/*------------- LOGO ------------------ */
#logo {
/* 	float: left; */
}
/*------------- LANGUAGE SELECTOR ------------------ */
#qtranslate-chooser {
	position: absolute;
	right: 0;
}

#qtranslate-chooser li {
	float: left;
}

#qtranslate-chooser li a {
	margin-left: 10px;
	color: black;
	font-size: 15px;
}

#qtranslate-chooser .active a {
	color: #666850;
}

.qtrans_flag { height:12px; width:18px; display:block }

.qtrans_widget_end {
	display: none;
}

/*------------- MENU PRINCIPALE ------------------ */
#menuPrincipale {
/* 	position: absolute; */
/* 	right: 0; */
/* 	bottom: 0; */
	margin-top: 30px;
}

#menuPrincipale li {
/* 	float: left; */

	padding-bottom: 16px;
}

#menuPrincipale li a {
	margin-left: 13px;
	color: black;
	font-size: 15px;
}

#menuPrincipale a:hover {
/* 	color: #bababa; */
	color: #666850;
}

#menuPrincipale .current-menu-item a,#menuPrincipale .current-post-ancestor a{
	color: #666850;
/* color: #bababa; */
}

/*------------- SOUS MENU PRINCIPALE ------------------ */

/*------------- FOOTER ------------------ */
footer {
}

/*------------- PAGES ---------------------------------------------------------------------------------------------------------------------- PAGES ---------------- */
/*------------- ELEMENTS DE PAGES ------------------ */

h1 {
/* 	color: #000; */
/* 	font-size: 18px; */
/* 	font-weight: bold; */
/* 	margin-bottom: 15px; */
/* 	line-height: 1.4; */
	display: inline;
	font: 300 13px/1.9 Georgia, Helvetica, Arial, sans-serif; 
	letter-spacing: 1px;
}

h2 {
	color: #000; 
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
	line-height: 1.4;
}

a {
	color: black;
	text-decoration: none;
}

a:hover {
	color: #666850;
}

.couleur {
	color: #666850;
}
/*------------- MISE EN PAGE ------------------ */
section {
	background-color: #fff;
/* 	padding: 20px; */
	margin-bottom: 20px;
	text-align: justify;
	width: 650px;
}

/* section img{ */
/* 	width: 650px; */
/* 	height: auto; */
/* } */
section article:last-child {
	margin-bottom: 0px;
}
/*------------- ARTICLES ------------------ */
article{
	margin-bottom: 100px;
	background-color: #fff;
	overflow: hidden;
}
article p{
	margin-bottom: 20px;
}
article img{
	width: 100%;
/* 	margin-bottom: 20px; */
}
article a,article iframe{
	display: block;
}
/*------------- 2 COLONNES ------------------ */
.twoColumns{
	position: relative;
	margin-bottom: 25px;
}

.twoColumns .column{
	
}
.twoColumns .leftColumn{
	width: 49.5%;
	float:left;
}
.twoColumns .rightColumn{
	width: 48%;
	float: right;
}
/*------------- GALLERIE D'IMAGES ------------------ */
.fancyBox a,.fancyBox .textContainer{
	width: 206px;
	height: 175px;
	float: left;
	margin-right: 16px;
	margin-bottom: 16px;
	overflow: hidden;
}

.fancyBox .textContainer{
	background-color: #bababa;
	position: relative;
	
}
.fancyBox .text{
/* 	z-index: 999; */
	color: white;
	font-size: 20px;
	text-align: left;
	line-height: 100%;
	padding: 6px;
}
.fancyBox .textBackground{
/* 	opacity: 1; */
/* 	position: absolute; */
/* 	height: 100%; */
/* 	width: 100%; */
/* 	background-color: #bababa; */
/* 	top: 0px; */
}

.fancyBox .noMarginRight{
	margin-right: 0;
}
.fancyBox{
	padding-bottom: 0;
	margin-right: -16px;
}

.fancyBox img{
	min-width: 206px;
	min-height: 175px;
}


/*------------- ARTISTE ------------------ */
#artiste article img{
	margin-bottom: 20px;
}
#artiste article{
	margin-bottom: 0px;
}
#expo{
	position: relative;
	min-height: 200px;
	margin-bottom:0px;
}
#expoBorder{
	height: 65px;
	border-bottom : 2px #bababa solid;
	margin-bottom:65px;
}
#expo p{
/* 	margin-bottom: 0px; */
}
#expo div{
	width: 410px;
}
#expo img{
	width: 200px;
	height: auto;
}
#expo #yo{
	width: 200px;
	height: inherit;
	position: absolute;
	right: 0;
	top: 0;
	overflow: hidden;
}
#pres{
	background-color: #999999;
    color: white;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 15px;
}
/*------------- GALERIE ------------------ */
#galerie article{
/* 	border-bottom: 1px #bababa solid; */
	margin-bottom: 100px;
}
#galerie article div{
/* 	max-height: 650px; */
	overflow: hidden;
	margin-bottom: 20px;
}

#galerie article:last-child {
	margin-bottom: 0px;
}

#galerie .indisponible{
	width:auto !important;
	cursor: pointer;
	display: inline-block;
	padding-right: 5px;
	position: relative;
	top: 3px;
}
/*
#galerie .indisponible::after{
	content: "indisponible";
	display: block;
	color: black;
}
*/


/*------------- CONTACT ------------------ */
#contact {
	
}

#contact article{
	margin-top: 5px;
	margin-bottom: 58px;
}
/*------------- CONTACT FORM ------------------ */

form{
	padding-top: 10px;
}
#name,#email,#subject,#message{
	margin-bottom: 10px;
	width: 375px;
/* 		line-height: 25px; */
}
#name,#email,#subject{
	height: 25px;
}

.wpcf7-form-control-wrap {
	position: relative;
}

.wpcf7-form-control,.wpcf7-not-valid-tip {
	font: 300 13px/1.1 Georgia, Helvetica, Arial, sans-serif;
	letter-spacing: 1px;
	height: 25px;
	margin: 0;
	padding: 0;
	border: 0;
}

.wpcf7-text,.wpcf7-not-valid-tip {
	border-bottom: 1px #bababa solid;
/*     height: 17px; */
    width: 275px;
}
.your-name,.your-email,.your-subject{
	float: right;
    position: relative;
	bottom: 9px;
}

#titreMessage{
	margin-top: 25px;
	margin-bottom: 10px;
}
#message {
/* 	height: 165px;*WARNING: TEXTAREA HEigHT VARIES WITH BROWSERS*/
	
	border: 1px #bababa solid;
}


.wpcf7-textarea {
	resize: none;
	height: 150px;
	width: 100%;
}

#send img{
	width: auto;
	margin: 0;
	padding: 0;
	margin-left: 7px;
}

.wpcf7-submit {
	padding: 0px 5px;
	background-color: white;
	border: 1px #bababa solid;
	height: 23px;
	width: auto;
}

.wpcf7-submit:hover {
	color: white;
	background-color: #bababa;
	border: 1px #bababa solid;
}
/* ERRORS */
.wpcf7-not-valid-tip {
	position: absolute;
	left: 0;
	top: 4px;
	background-color: #bababa;
	text-align: left;
	width: 97%;
	padding-left: 3%;
	line-height: 24px;
	color: white;
	height: 20px;
}

.wpcf7-response-output {
	background-color: #bababa;
	padding: 0px 10px;
	margin-top: 10px;
	width: 358px;
	color: white;
}
.wpcf7-display-none{
	display: none;
}

/*------------- OTHERELEMENTS ----------------------------------------------------------------------------------------------- OTHERELEMENTS ---------------- */

.breaker {
	clear: both;
}


/*------------- PAGE NOT FOUND ------------------ */
#notFound {
	min-height: 400px;
	padding-top: 115px;
}

/*------------- DEVELOPPED BY ------------------ */
#developpedBy {
	color: #000;
	font-size: 12px;
	font-weight: bold;
	/* 	padding: 0px 5px 7px 5px; */
	/* 	border-radius: 5px; */
	/* 	display: block; */
	/* 	float: right; */
	/* 	position: fixed; */
	/* 	bottom: 5px; */
	/* 	right: 5px; */
	font-family: "Helvetica neue",helvetica;
}

#developpedBy img {
	height: 15px;
	width: 15px;
	position: relative;
	top: 4px;
	padding: 0;
	margin: 0;
}

#developpedBy:hover { /* 	background-color: #fff; */
	/* 	border: 1px black solid; */
	color: #666850;
}

/*------------- IPADS ------------------ */
@media only screen and (device-width: 768px) {
	/* For general iPad layouts */
	header {
		position: relative;
	}
}

@media only screen and (min-device-width: 481px) and (max-device-width:
	1024px) and (orientation:portrait) { /* For portrait layouts only */
	header {
		position: relative;
	}
}

@media only screen and (min-device-width: 481px) and (max-device-width:
	1024px) and (orientation:landscape) { /* For landscape layouts only */
	header {
		position: relative;
	}
}

/*------------- IPHONES ------------------ */
@media screen and (max-device-width: 480px) {
	/*--- iPhone only CSS here ---*/
	header {
		position: relative;
	}
}



/* ***** PAGE EXPOSITIONS ***** */
#expositions .exposition-fiche,
#expositions-archives .exposition-fiche {
	background: #F0F0F0;
	padding: 15px 15px 15px 20px;
	display: flex;
	margin-bottom: 15px;
}
#expositions .exposition-fiche .exposition-fiche-col-gauche,
#expositions-archives .exposition-fiche .exposition-fiche-col-gauche {
	position: relative;
	margin-right: 20px;
	width: calc(100% - 40px);
}
#expositions .exposition-fiche .exposition-fiche-col-droite,
#expositions-archives .exposition-fiche .exposition-fiche-col-droite {
	margin-left: 20px;
	width: 200px;
}
#expositions .expo-titre,
#expositions-archives .expo-titre {
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 5px;
}
#expositions .expo-description,
#expositions-archives .expo-description {
	margin-bottom: 45px;
}
#expositions .expo-tags,
#expositions-archives .expo-tags {
	position: absolute;
	bottom: 0;
}
#expositions .expo-lieu,
#expositions .expo-dates,
#expositions-archives .expo-lieu,
#expositions-archives .expo-dates {
	background: #BABABA;
	padding: 2px 7.5px;
	color: white;
	font-weight: bold;
	letter-spacing: 0;
	font-size: 12px;
	display: inline-block;
	margin: 1px 0;
}
#expositions-archives .expo-titre,
#expositions-archives .expo-description {
	color: #8C8C8C;
}
#expositions-archives .expo-lieu,
#expositions-archives .expo-dates {
	color: #F0F0F0;
}
#expositions .exposition-fiche-col-droite img,
#expositions-archives .exposition-fiche-col-droite img {
	width: 200px;
	height: auto;
}
#expositions-archives h2 {
	margin-top: 50px;
}
#expositions-archives-old {
	margin-top: 35px;
	margin-bottom: 35px;
}
#expositions-archives-old li:before {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	background-image: url('https://willaert.mikodigital.com/wp-content/uploads/2021/09/fleche.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: text-bottom;
	margin-right: 15px;
}