/*Fonts*/

@font-face {
	font-family: 'Lekton';
	src: url('https://www.lematrimoine.fr/wp-content/themes/le-matrimoine/fonts/Lekton-Regular.ttf') format('truetype');
	font-style:normal;
	font-weight: normal;
}

@font-face {
	font-family: 'Lekton';
	src: url('https://www.lematrimoine.fr/wp-content/themes/le-matrimoine/fonts/Lekton-Italic.ttf') format('truetype');
	font-style:italic;
	font-weight: normal;
}

@font-face {
	font-family: 'Lekton';
	src: url('https://www.lematrimoine.fr/wp-content/themes/le-matrimoine/fonts/Lekton-Bold.ttf') format('truetype');
	font-style:normal;
	font-weight: bold;
}



* {
	margin:0;
	padding:0;
	font-family: 'Lekton', 'Courier';
	font-size: 19px;
}

:root {
	--text-height : 21px;
	--accent-color: #f2422a;
	--small-size: 15px;
}

body {
	background-color:var(--accent-color);
}

a, .home ul.tags a {
	color:var(--accent-color) !important;
	text-decoration: none !important;
	text-decoration: none;
	transition-duration: 0.3s;
	transition-property: color;
}

a:hover, .home ul.tags a:hover {
	color:black !important;
}

#menu-header-menu li a, article a, .links a, li span a, .submenu a, .column h6+ul li a {
	color:black !important;
}

#menu-header-menu li a:hover, article a:hover, .links a:hover, li span a:hover, .submenu a:hover, .column h6+ul li a:hover {
	color:var(--accent-color) !important;
}


/* Tabs */

#menu-header-menu:after, #menu-header-menu:before, .menu-mobile:after, .menu-mobile:before, form:after, form:before, figcaption:after, figcaption:before, ul.tags:before, ul.tags:after, ul.tags li.tagbreak:before, ul.tags li.tagbreak:after {
    content: '';
    position: absolute;
	width: 16px;
    height: 16px;
    box-shadow: 16px 0px 0px 16px white;
    clip: rect(0px, 16px, 16px, 0px);
}


/*Menu*/

.menu-mobile {
	display: none;
}

#menu-header-menu, .searchform, .menu-mobile {
	top:0;
	z-index: 2;
	position:fixed;
	left:16px;
	color:black;
	line-height: 32px;
	z-index: 5;
}

.searchform {
	left:unset;
	right:16px;
}

#menu-header-menu:after, #menu-header-menu:before, .menu-mobile:after, .menu-mobile:before, form:after, form:before {
    top: -1px;
    right: -16px;
    border-bottom-right-radius: 100%;
    transform: rotate(180deg);
}

#menu-header-menu:before, .menu-mobile:before, form:before {
	right:initial;
	left:-16px;
    transform: rotate(-90deg);
}

#menu-header-menu li, .searchform form, .menu-mobile li {
	font-weight: normal;
	display: block;
	float:left;
	padding-left:10px;
	padding-right:10px;
	background-color: white;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
	height:32px;
}

#menu-header-menu li a {
	display: inline-block;
	margin-top:2px;
}

#menu-header-menu li.current-menu-item a {
	color:var(--accent-color) !important;
}

#menu-header-menu li a.active, .active {
	color:var(--accent-color) !important;
}

.searchform input {
	all:unset;
	width:75px;
	font-size: var(--small-size);
}

/*Home*/

.background-img {
	position:fixed;
	width:100vw;
	height:100vh;
	z-index: -1;
}

.background-img img {
	width:100%;
	height:auto;
	margin-top: 50vh;
	transform: translateY(-50%);
}

.background-img figcaption {
	line-height: 26px;
	right:16px;
	position:absolute;
	bottom:0;
	background-color:white;
	z-index: 3;
	padding-left:10px;
	padding-right:10px;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	height:26px;
}

figcaption * {
	font-size: var(--small-size);
}

figcaption span {
	display:inline-block;
	margin-top:2px;
}

figcaption:after, figcaption:before {
	content:'';
    right: -16px;
    border-bottom-right-radius: 100%;
    transform: rotate(90deg);
    bottom:0;
}

figcaption:before {
	right:initial;
	left:-16px;
    transform: rotate(0deg);
}


/*Standard layout*/

section {
	position:absolute;
	width:calc(100vw - 16px);
	top:100vh;
	height:auto;
	min-height:40vh;
	background-color:white;
	display: flex;
	flex-wrap: wrap;
	border-top-left-radius: 20px;
	margin-left:16px;
	transition-duration: 1s;
	transition-property: top;
}

/* caption */

section figcaption {
	position:absolute;
	margin-top:-26px;
	line-height: 26px;
	right:16px;
	background-color:white;
	z-index: 3;
	padding-left:10px;
	padding-right:10px;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	height:26px;

}

.wp-block-image figcaption {
	display:none;
}

/* Section content */
.column {
	padding:15px;
	line-height: var(--text-height);
}

.search .column {
	padding-top:0;
    text-align: center;
    width: 100%;
    min-height: 40vh;
}

.search .column p {
	max-width: unset;
	display: inline-block;
}

.column img {
	max-width: 100%;
	height:auto;
	margin-bottom:20px;
	border-radius: 5px;
}

.left-col {
	flex: 2;
	word-wrap: break-word;
	word-break: break-word;
}

.right-col {
	flex: 1;
	word-wrap: break-word;
	word-break: break-word;
}


.break {
	width: 100%;
	height:0;
}

h2, h1 {
	color: var(--accent-color);
	text-transform: uppercase;
	font-weight: normal;
	line-height: initial;
	padding-top:30px;
	letter-spacing: 3px;
	max-width: 80%;
	padding-bottom:20px;
}

h2:first-of-type {
	padding:0;
	padding-bottom:20px;
}

h2 strong, h1 strong {
	font-weight: normal;
}

p {
	margin-bottom:20px;
	max-width:80%;
	text-align:left !important;
}

.left-col p, .left-col span {
	color:black !important;
}

.right-col p {
	max-width: 90%;
}

a.wp-block-file__button {
	padding-left:15px;
}

.column h6 {
	font-weight: normal;
	padding-bottom:20px;
	display:inline-block;
	text-transform: uppercase;
	vertical-align: top;
	color:var(--accent-color);
}

.page-id-8371 .column h6 {
	width:10%;
	color:black;
}

.page-id-8365 .right-col h6 {
	width:30%;	
	color:black;
}

.column h6+ul {
	padding-bottom:20px;
    display: inline-block;
    width: 80%;
	list-style: none;
}

.column h6+ul li {
	min-height: var(--text-height);
}

.right-col h6+ul {
	width:60%;
}

.page-template-page-standard .left-col > h2:first-of-type, .page-template-page-standard .right-col > img:first-of-type {
	display: none;
}

.left-col h2+h2, .page-template-page-standard .right-col > img+h2 {
	padding-top:0;
}

.column p+ul li {
	list-style-position: inside;
}

section h3, section h4 {
	font-weight: normal;
	letter-spacing: 1px;
	font-style: italic;
	max-width: 80%;
	padding-left:30px;
}


/*Quizz*/

span.repbtn {
	display: block;
	text-align: right;
	margin-top:15px;
	color:var(--accent-color);
	cursor:pointer;
}

span.reponse {
	display: block;
	text-align: right;
	padding-bottom:10px;
	opacity:0;
	transition-duration: 0.3s;
	transition-property: opacity;
}

/*Artiste page*/

.grid {
	display:flex;
	flex-wrap: wrap;
	min-width: 100%;
	padding-top:50px;
}

article {
	flex: 1 0 25%;
	text-align: center;
	flex-grow: initial;
}

article .thumb {
	width:70%;
	height:40vh;
	overflow: hidden;
	margin-left:15%;
	background-color:var(--accent-color);
	border-radius: 5px;
	margin-bottom:10px;
}

article img {
	width:auto;
	height:auto;
	min-width: 101%;
	max-width:200%;
	min-height:100%;
    margin-top: 20vh;
    margin-left: 50%;
    transform: translate(-50%,-50%);
}

article h3 {
	font-weight: normal;
	margin-bottom:50px;
	text-decoration: none;
	font-style: normal;
	max-width: 100%;
	letter-spacing: 0px;
	padding-left:0px;
}

/*Artistes*/

ul.tags {
	position:absolute;
	margin-top:-32px;
	line-height: 32px;
	height:32px;
	left:32px;
	z-index: 3;
	padding-left:10px;
	padding-right:10px;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

.home ul.tags {
	position: fixed;
	bottom:0;
	left:16px;
}

.home ul.tags li:first-of-type {
	color:var(--accent-color);
}

ul.tags li {
	font-weight: normal;
	display: inline-block;
	vertical-align: top;
	padding-left:10px;
	padding-right:10px;
	background-color: white;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

ul.tags li.tagbreak {
	padding-left:0;
	padding-right:0;
	margin-left:16px;
	margin-right:16px;
	width:0px;
	color:transparent;
}

ul.tags:before, ul.tags li.tagbreak:after {
	left:-6px;
    border-bottom-right-radius: 100%;
    bottom:0;
}

ul.tags:after, ul.tags li.tagbreak:before {
	left:initial;
    border-bottom-right-radius: 100%;
    bottom:0;
    transform: rotate(90deg);
}

ul.tags li.tagbreak:after {
	left:initial;
}

ul.tags li.tagbreak:before {
	margin-left:-16px;
}

li.domaine span:first-letter {
	text-transform: capitalize;
}

ul.tags li span {
	display: inline-block;
	margin-top: 2px;
}

ul.tags input {
	all:unset;
	width:95px;
	margin-top:2px;
}

/*Submenus*/
.submenu {
	display: inline-block;
}

.submenu div {
	position:absolute;
	background-color:white;
	border-radius: 16px;
	padding-bottom:5px;
	padding-right:5px;
	opacity: 0;
	transition-duration: 0.3s;
	transition-property: opacity;
}

.submenu div li {
	display: block;
	background-color: transparent;
}


.portrait {
	text-align:center;
	padding-top:10px;
}

.portrait img {
	border-radius: 5px;
}

.portrait+h2, .oeuvres h2 {
	text-align:center;
	max-width:100%;
}

.links a {
}

.oeuvres {
	padding-top:40px;
	width:100%;
}

.oeuvres .cont, .oeuvres .cont>figure {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px 50px 50px 50px;
	text-align:center;
}

.oeuvres .cont figure figure, .oeuvres .cont figcaption {
	all:unset;
}

.oeuvres .cont figcaption:before, .oeuvres .cont figcaption:after {
	display:none;
}

.oeuvres .cont p, .oeuvres .cont figcaption {
	position:absolute;
	font-size: var(--small-size);
	margin-top:-23px;
	margin-left:5px;
	transition-duration: 0.3s;
	transition-property: opacity;
	background-color:white;
	padding:4px;
	border-radius: 8px;
	opacity:0;
	margin-bottom: 20px;
    max-width: 80%;
    text-align: left !important;
    display: block;
}

.oeuvres .cont img {
	height:35vh;
	width:auto;
	margin:5px;
	margin-bottom:0;
	border-radius: 5px;
}

body.category li.current-menu-item a {
	color:var(--accent-color) !important;
}