/* Raleway, self-hosted (one variable file per script, 300-700): no request
   to Google, so no visitor IP leaves for a third party and the CSP stays 'self'. */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url(/fonts/raleway-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url(/fonts/raleway-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url(/fonts/raleway-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Category colours. The 2013 site kept them in class names (A09689...) and
   copied them around in jQuery; here one attribute drives both the menu item
   and the page background (html[data-page], set by site.js and prerender). */
[data-cat=home], [data-cat=contact], html[data-page=home] { --c: #FF9400; }
[data-cat=photoworks], html[data-page=photoworks] { --c: #A09689; }
[data-cat=photopro], html[data-page=photopro] { --c: #AAB464; }
[data-cat=dev], html[data-page=dev] { --c: #0077AD; }

html {
	height: 100%;
}
body {
	font-family: 'Raleway', sans-serif;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	/*overflow:hidden;*/
}
[hidden] {
	display: none !important;
}
html[lang=fr] .lang-en,
html[lang=en] .lang-fr {
	display: none !important;
}
.catGalList {
	display: none;
	height: 100%;
}
.catGalList.shownDiv {
	display: block;
	animation: fadeIn 0.5s;
}
@keyframes fadeIn {
	from { opacity: 0; }
}

a:hover, a:visited {
	color: black;
}
a {
	color: black;
	text-decoration: none;
}
#menuUl a {
	font-size: 160%;
	padding-right: 15px;
}
#menuUl li {
	padding-top: 20px;
	padding-bottom: 20px;
}
#menuUl li:hover,
#menuUl li.shownMenu {
	background-color: var(--c);
}
#menuUl li:hover a,
#menuUl li.shownMenu a {
	color: #FFF;
}
ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.miniGal {
	float: left;
	width: 300px;
	height: 200px;
	margin: 25px;
	text-align: center;
	font-size: 140%;
	color: white;
}
.miniGal a{
	color:white;
}
.miniGal img {
	max-width: 250px;
	max-height: 165px;
	padding: 5px;
	background-color: #EEE;
	border: 1px solid #888;
	box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3);
}
.spacer {
	clear: both;
}
.wrapper {
	margin: 0 auto;
	height: 100%;
}
#menu {
	font-weight: 700;
	text-align: right;
	text-transform: uppercase;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	width: 250px;
	box-shadow: -20px 0 20px -20px #AAA inset;
}
#content {
	color: white;
	/*height:100%;*/
	margin-left: 250px;
	padding-bottom: 20px;
}
#fixedBG {
	position: fixed;
	background-color: var(--c, #FF9400);
	height: 100%;
	width: 100%;
	top: 0px;
	left: 250px;
	z-index: -2;
}
#galContent {
	text-align: center;
	color: white;
	min-height: 100%;
	margin-left: 250px;
	overflow: auto;
	padding-bottom: 30px;
}
#imageContainer {
	position: relative;
	padding-top: 25px;
	min-height: 120px;
}
#photo {
	display: block;
	max-width: 95%;
	max-height: 80vh;
	margin: auto;
	padding: 5px;
	background-color: #EEE;
	border: 1px solid #888;
	box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}
#photo:not([src]) {
	display: none;
}
.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	margin: -50px 0 0 -50px;
	border-radius: 50%;
	border: 10px dotted #FFF;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.4));
	animation: spin 1.1s linear infinite;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}
#galerie {
	color: white;
	margin: auto;
	max-width: 85%;
}
#navigateur {
	padding-left: 10px;
	padding-right:10px;
	width: 85%;
	margin: 10px auto;
	text-align: center;
}
#navigateur button {
	font: inherit;
	font-size: 150%;
	color: white;
	background: none;
	border: 0;
	padding: 0 0.6em;
	cursor: pointer;
}
#texte {
	width: 85%;
	margin: 10px auto;
	height: auto;
	background-color: white;
	text-align: justify;
	padding: 10px;
	color: black;
	box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3);
}
.contenuTexte {
	padding-top: 5px;
	font-weight: 400;
	font-size: 75%;
}
.contenuTexte p {
	margin: 0;
	margin-top: 5px;
}
.contenuTexte ul li {
	display: inline;
	list-style: none;
	margin-right: 10px;
}
.contenuTexte ul li:before {
	content: "\2023\0020";
}
.contenuTexte ul li a {
	border-bottom: 1px dotted;
	padding-bottom: 1px;
}

p a {
	border-bottom: 1px dotted;
	padding-bottom: 1px;
}
.titreTexte {
	font-weight: 500;
	font-size: 120%;
	padding-bottom: 2px;
	border-bottom: 1px dashed;
}
.slide {
	width: 100%;
	text-align: center;
	background-color: transparent;
}
.slide img {
	max-width: 95%;
	max-height: 80vh;
	margin: auto;
	padding: 5px;
	background-color: #EEE;
	border: 1px solid #888;
	box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3);
}
.shownMenu {
	z-index:5000;
	box-shadow: 0 10px 10px -10px #AAA, 0 -10px 10px -10px #AAA;
}
#chngLang {
	width: 250px;
	height: 50px;
	position: fixed;
	font-size: 120%;
	top: 100%;
	left: 25px;
	margin-top: -40px;
}
.containerCv {
	font-size: 90%;
	min-height: 30px;
	width: 80%;
	height:auto;
	margin: auto;
	margin-top: 25px;
	padding: 15px;
	background-color: #FFF;
	color: black;
	border: 1px solid #888;
	box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3);
}

.containerCv a {
	padding-bottom: 1px;
	border-bottom: 1px dotted;
}

.titreCv {
	width: 100%;
	padding-bottom: 5px;
	border-bottom: 2px dotted;
}
.cvEntry {
	font-size: 85%;
	padding-bottom: 20px;
	margin-left: 130px;
}
.containerCv li {
	font-size: 90%;
	margin-right: 30px;
	padding-bottom: 20px;
	display: inline;
	list-style: none;
}

.dateCv {
	font-size: 90%;
	float: left;
	text-align: right;
	width: 100px;
}

.lieuCv {
	font-size: 85%;
	float: right;
	width: 250px;
}


#portrait{
	height:inherit;
}

#portrait img {
	float: right;
	height: 150px;
}

.nom{
font-weight:700;
font-size:120%;
margin-bottom:-10px;
}

#accueil {
	position: fixed;
	top: 40%;
	left: 45%;
	text-align: center;
	font-size: 250%;
}

.titreSite {
	font-size: 120%;
	font-weight: 700;
}

/* Phones and narrow windows: the sidebar becomes a top bar */
@media (max-width: 700px) {
	#menu {
		position: sticky;
		z-index: 10;
		width: 100%;
		height: auto;
		background-color: #FFF;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	}
	#menuUl {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#menuUl li {
		padding: 12px 2px;
	}
	#menuUl a {
		font-size: 95%;
		padding: 0 10px;
	}
	.shownMenu {
		box-shadow: none;
	}
	#content,
	#galContent {
		margin-left: 0;
	}
	#fixedBG {
		left: 0;
	}
	#accueil {
		left: 0;
		right: 0;
		font-size: 170%;
	}
	.miniGal {
		float: none;
		width: auto;
		height: auto;
		margin: 25px 16px;
	}
	.miniGal img {
		max-width: calc(100% - 12px);
		max-height: none;
	}
	#imageContainer {
		padding-top: 16px;
	}
	#photo {
		max-height: 70vh;
	}
	#navigateur button {
		font-size: 200%;
		padding: 0 1em;
	}
	#texte {
		width: auto;
		margin: 10px 16px 70px;
	}
	#chngLang {
		top: auto;
		bottom: 16px;
		left: auto;
		right: 16px;
		width: auto;
		height: auto;
		margin: 0;
		padding: 6px 10px;
		background-color: #FFF;
		box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3);
	}
}