/*
--------------------------------------------------------------
----------- ROOT VARIABLES -----------------------------------
--------------------------------------------------------------
*/

:root {
  --main-color-text:#333;
  --main-color-link:#333;
}

/* -------------------------------------------------------------- */
/* ----------- CUSTOM FONTS ------------------------------------- */
/* -------------------------------------------------------------- */

@font-face {
	font-family: 'Oswald';
	font-display: auto;
	src: url('/img/fonts/oswald-300-webfont.woff2') format('woff2'),
	     url('/img/fonts/oswald-300-webfont.woff') format('woff'),
	     url('/img/fonts/oswald-300.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Oswald';
	font-display: auto;
	src: url('/img/fonts/oswald-400-webfont.woff2') format('woff2'),
	     url('/img/fonts/oswald-400-webfont.woff') format('woff'),
	     url('/img/fonts/oswald-400.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Oswald';
	font-display: auto;
	src: url('/img/fonts/oswald-700-webfont.woff2') format('woff2'),
	     url('/img/fonts/oswald-700-webfont.woff') format('woff'),
	     url('/img/fonts/oswald-700.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

.Oswald,.FontOswald {
	font-family: Oswald,Helvetica,Sans-Serif !important;
  -webkit-font-smoothing: antialiased;
}

.FtSize6 { font-size:6px; }
.FtSize8 { font-size:8px; }
.FtSize10 { font-size:10px; }
.FtSize12 { font-size:12px; }
.FtSize13 { font-size:13px; }
.FtSize16 { font-size:16px; }
.FtSize20 { font-size:20px; }
.FtSize22 { font-size:22px; }
.FtSize24 { font-size:24px; }
.FtSize26 { font-size:26px; }
.FtSize28 { font-size:28px; }
.FtSize30 { font-size:30px; }
.FtSize40 { font-size:40px; }

.FtWeight200 { font-weight:200; }
.FtWeight400 { font-weight:400; }
.FtWeight600 { font-weight:600; }
.FtWeight800 { font-weight:800; }

.FtBold { font-weight:bold !important; }
.FtItalic { font-style:italic !important; }
.FtUpper  { text-transform:uppercase !important; }
.FtCapital  { text-transform:capitalize !important; }

.FtColor0 { color:#000; }
.FtColor1 { color:#111; }
.FtColor2 { color:#222; }
.FtColor3 { color:#333; }
.FtColor4 { color:#444; }
.FtColor5 { color:#555; }
.FtColor6 { color:#666; }
.FtColor7 { color:#777; }
.FtColor8 { color:#888; }
.FtColor9 { color:#999; }
.FtColorA { color:#aaa; }
.FtColorB { color:#bbb; }
.FtColorC { color:#ccc; }
.FtColorD { color:#ddd; }
.FtColorD { color:#eee; }

/* -------------------------------------------------------------------- */
/* -- GLOBAL LAYOUT --------------------------------------------------- */
/* -------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
	min-height:100%;
	-webkit-overflow-scrolling:touch;
}

body {
	padding:0;
	margin:0;
  font-family: -apple-system, BlinkMacSystemFont,
    "Roboto", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
	font-size:15px;
  color:#000;
  background-color:#fff;
  min-height:100vh;
}

img {
	border:0;
}

/* -------------------------------------------------------------------- */
/* -- GENERIC CLASSES ------------------------------------------------- */
/* -------------------------------------------------------------------- */

.Ma0px  { margin:0; }
.MaT0px { margin-top:0; }
.MaL0px { margin-left:0; }
.MaR0px { margin-right:0; }
.MaB0px { margin-bottom:0; }

.MaAuto { margin:auto; }
.MaTAuto { margin-top:auto; }
.MaLAuto { margin-left:auto; }
.MaRAuto { margin-right:auto; }
.MaBAuto { margin-bottom:auto; }

.Ma2px  { margin:2px; }
.MaT2px { margin-top:2px; }
.MaL2px { margin-left:2px; }
.MaR2px { margin-right:2px; }
.MaB2px { margin-bottom:2px; }

.Ma3px  { margin:3px; }
.MaT3px { margin-top:3px; }
.MaL3px { margin-left:3px; }
.MaR3px { margin-right:3px; }
.MaB3px { margin-bottom:3px; }

.Ma5px  { margin:5px; }
.MaT5px { margin-top:5px; }
.MaL5px { margin-left:5px; }
.MaR5px { margin-right:5px; }
.MaB5px { margin-bottom:5px; }

.Ma10px  { margin:10px; }
.MaT10px { margin-top:10px; }
.MaL10px { margin-left:10px; }
.MaR10px { margin-right:10px; }
.MaB10px { margin-bottom:10px; }

.Ma15px  { margin:15px; }
.MaT15px { margin-top:15px; }
.MaL15px { margin-left:15px; }
.MaR15px { margin-right:15px; }
.MaB15px { margin-bottom:15px; }

.Ma20px  { margin:20px; }
.MaT20px { margin-top:20px; }
.MaL20px { margin-left:20px; }
.MaR20px { margin-right:20px; }
.MaB20px { margin-bottom:20px; }

.Ma30px  { margin:30px; }
.MaT30px { margin-top:30px; }
.MaL30px { margin-left:30px; }
.MaR30px { margin-right:30px; }
.MaB30px { margin-bottom:30px; }

.Ma40px  { margin:40px; }
.MaT40px { margin-top:40px; }
.MaL40px { margin-left:40px; }
.MaR40px { margin-right:40px; }
.MaB40px { margin-bottom:40px; }

.Pa0px  { padding:0; }
.PaT0px { padding-top:0; }
.PaL0px { padding-left:0; }
.PaR0px { padding-right:0; }
.PaB0px { padding-bottom:0; }

.Pa5px  { padding:5px; }
.PaT5px { padding-top:5px; }
.PaL5px { padding-left:5px; }
.PaR5px { padding-right:5px; }
.PaB5px { padding-bottom:5px; }

.Pa10px  { padding:10px; }
.PaT10px { padding-top:10px; }
.PaL10px { padding-left:10px; }
.PaR10px { padding-right:10px; }
.PaB10px { padding-bottom:10px; }

.Pa15px  { padding:15px; }
.PaT15px { padding-top:15px; }
.PaL15px { padding-left:15px; }
.PaR15px { padding-right:15px; }
.PaB15px { padding-bottom:15px; }

.Pa20px  { padding:20px; }
.PaT20px { padding-top:20px; }
.PaL20px { padding-left:20px; }
.PaR20px { padding-right:20px; }
.PaB20px { padding-bottom:20px; }

.AlignVT { vertical-align:top; }
.AlignVM { vertical-align:middle; }
.AlignVB { vertical-align:bottom; }

.AlignHL { text-align:left !important; }
.AlignHC { text-align:center !important; }
.AlignHR { text-align:right !important; }
.AlignHJ { text-align:justify !important; }

.DisBL { display:block; }
.DisIB { display:inline-block; }
.DisIN { display:inline; }
.DisFX { display:flex; }
.DisTB { display:table; }
.DisTC { display:table-cell; }
.DisNO { display:none; }
.DisGD { display:grid; }

.BorderR { border:1px dotted red; }
.BorderG { border:1px dotted green; }
.BorderB { border:1px dotted blue; }
.BorderJ { border:1px dotted yellow; }
.BorderW { border:1px dotted white; }
.Border1 { border:1px dotted gray; }
.Border2 { border:1px dotted black; }

.Opacity0 { opacity:0; }
.Opacity2 { opacity:.2; }
.Opacity4 { opacity:.4; }
.Opacity6 { opacity:.6; }
.Opacity7 { opacity:.7; }
.Opacity8 { opacity:.8; }
.Opacity1 { opacity:1; }

.FtLH1em { line-height:1em; }
.FtLH05em { line-height:.5em; }
.FtLH0em { line-height:0em; }

.instream {
	padding:0px;
	margin:0px;
	display:inline;
}

/* ------------------------------------------------------------- */
/* -- SCREEN INFERIOR TO OR MOBILE ----------------------------- */
/* ------------------------------------------------------------- */

@media only screen and (max-width:1170px) {
	#MainContainer {
		margin:100px 20px 20px 20px;
	}

	#Panel {
		position:fixed;
		width:100%;
		background-color:#fff;
		left:0;
		top:0;
		padding:10px 20px 10px 20px;
		z-index:128;
	}

	#Panel ul li {
		padding:4px 0 4px 0;
		list-style-type:none;
		font-weight:300;
	}

	#Panel .Title {
		font-size:20px;
	}

	#MobileNav {
		position:fixed;
		width:60px;
		z-index:130;
		opacity:1;
		right:0;
		top:0;
	}

	.nav-icon {
	  margin: 1em;
	  width: 30px;
	}

	.nav-icon:after,
	.nav-icon:before,
	.nav-icon div {
	  background-color: #000;
	  border-radius: 3px;
	  content: '';
	  display: block;
	  height: 4px;
	  margin: 6px 0;
	  transition: all .2s ease-in-out;
	}

	.nav-icon.open:before {
  	transform: translateY(10px) rotate(135deg);
	}

	.nav-icon.open:after {
  	transform: translateY(-10px) rotate(-135deg);
	}

	.nav-icon.open div {
  	transform: scale(0);
	}

	#Menu {
		display:none;
	  background-color:#fff;
	  width:100%;
	  height:calc(100% - 0px);
	  font-size:20px;
	  text-align:center;
	  overflow-y:scroll;
	  -webkit-overflow-scrolling:touch;
	  position:fixed;
	  top:40px;
	  left:0;
	  bottom:0;
	  right:0;
	  padding:40px 0;
	}

	#SocialProfile {
		display:flex;
		margin:40px auto 20px auto;
		width:200px;
		justify-content:space-between;
	}

	#Section {
		background-color:#fff;
	}

}

/* ----------------------------------------------------------------------- */
/* -- SCREENS SUPERIOR TO OR DESKTOP ------------------------------------- */
/* ----------------------------------------------------------------------- */

@media only screen and (min-width:1170px) {

	#MainContainer {
		--layout-nav-len:230px;
		--layout-nav-space:50px;
		display:flex;
		margin:var(--layout-nav-space);
	}

	#Navigation {
		flex: 0 0 var(--layout-nav-len);
	}

	#Panel {
		background-color:#fff;
		text-align:right;
		position: fixed;
  	top:50px;
  	left:50px;
  	width:var(--layout-nav-len);
	}

	#Panel ul li {
		padding:4px 0 4px 0;
		list-style-type:none;
	}

	#MobileNav,#MobileMenuClose {
		display:none;
	}

	#Menu {
		display:block;
		width:100%;
	  font-size:20px;
	  font-weight:300;
	  list-style-type: none;
	  margin-top:30px;
	}

	#Section {
		margin:60px auto 0 auto;
		max-width:1280px;
		flex: 1 1;
  	padding:0 0 0 var(--layout-nav-space);
	}

	#SocialProfile {
		display:flex;
		padding:40px 0 10px 0;
		max-width:200px;
		justify-content:space-between;
		margin:0 0 0 auto;
	}
}

/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */

#MainContainer {
	vertical-align:top;
}

#Panel div {
	text-transform:uppercase;
}

#Panel .Users {
	font-weight:300;
}

.Headline {
	font-family:Oswald,Helvetica;
	font-size:30px;
	margin:0 0 40px 0;
	font-weight:300;
}

section {
	text-align:left;
	padding:20px auto 20px auto;;
}

td.form-tip {
  border-style: dashed;
  border-width: 1px;
  border-color: #000000;
  padding: 8px;
}
.n10 {
  font-size: 10px;
  font-style: normal;
  font-weight: normal;
  color: #FFFFCC;
}
.input {
  text-decoration: none;
  color: #000000;
  scrollbar-face-color:#EEEEEE;
  scrollbar-arrow-color:#666666;
  scrollbar-track-color:#FFFFFF;
  scrollbar-shadow-color:#AAAAAA;
  scrollbar-highlight-color:#FFFFFF;
  scrollbar-3dlight-color:#888888;
  scrollbar-darkshadow-Color:#888888;
	padding:20px;
	font-size:15px;
	font-family:Helvetica,Sans-Serif;
	border:1px solid #aaa;
}
.n10black {
  font-size: 10px;
  font-style: normal;
  font-weight: normal;
  color: #000000;
}
a:link {
  color:var(--main-color-link);
  text-decoration: none;
}
a:visited {
	color:var(--main-color-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a.dot_link:active,a.dot_link:link,a.dot_link:visited {
  text-decoration: none;
  border-bottom: 1px dotted var(--main-color-link);
}
a.dot_link:hover {
  text-decoration: none;
}
.text_as_link {
	cursor: pointer;
	color:var(--main-color-link);
	text-decoration: none;
}

.text_as_link:hover {
	color:var(--main-color-link);
  text-decoration: none;
  border-bottom: 1px solid var(--main-color-link);
}
#lien-none {text-decoration: none}
#StyleFont2 {
  line-height: 1.3;
  font-size: 11px;
  color: #666666;
}
li.Bullet {
  list-style: none;
  line-height: 1.1em;
  margin-top:3px;
  padding:0;
  /*
  background: url(/img/l_bullet_square.gif);
  background-repeat: no-repeat;
  background-position: 0 .5em;
  */
  text-indent: 12px;
}

/* ---- custom fonts */


.FontHead {
	visibility: hidden;
}
.FontBaseLine {
  visibility: hidden;
}

.NoWrap {
	white-space: nowrap;
}

/* ------------- button -------------------- */

.Button {
	cursor: pointer;
  text-decoration: none;
	font-weight:bold;
	font-size:13px;
	padding:15px;
	border: 0px;
	background:#666666;
	color:#EEEEEE;
	border-radius:3px;
	vertical-align:middle;
	line-height:0;
}

.Button:hover {
	background-color:#BBBBBB;
}

/* ---- box /zone ---- */

.Box {
	/*border-radius:7px;*/
	margin-bottom:10px;
	/*background-color:#F3F3F3;*/
	/*border:1px dotted #CCCCCC;*/
	width:100%;
}
.Box .TitleText {
  text-align:left;
  font-size:17px;
  letter-spacing:1px;
  color: #444444;
  white-space: nowrap;
  font-variant: small-caps;
  /*background-color:#EFEFEF;*/
  /*border-top:1px dotted black;*/
  padding:0 0 0 5px;
  margin:0px;
  font-weight:700;
}
.Box .Help {
	float:right;
	padding-right:7px;
}
.Box .MoreLink {
	padding-left:10px;
}
.Box_Help {
	background-image:url('/img/gfxmatrix.png');
	background-repeat:no-repeat;
	display:inline-block;
	width:16px;
	height:16px;
	background-position:-42px 0px;
	margin-top:5px;
}
.Box .Content {
	padding:10px;
}

/* ---- Arrow box ---- */

.arrow_box {
	position: absolute;
	background: #FFFFFF;
	border: 1px solid #999;
	padding:7px 7px 7px 7px;
  -webkit-box-shadow: 0 1px 6px 1px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 1px 6px 1px rgba(0,0,0,0.3);
  box-shadow: 0 1px 6px 1px rgba(0,0,0,0.3);
  margin-top: 25px;
  width:0px;
  display:none;
  text-align:left;
  vertical-align:middle;
  z-index:29;
}

.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(221, 221, 221, 0);
	border-bottom-color: #fff;
	border-width: 5px;
	left: 8px;
	margin-left: -5px;
}
.arrow_box:before {
	border-color: rgba(136, 136, 136, 0);
	border-bottom-color: #999;
	border-width: 6px;
	left: 8px;
	margin-left: -6px;
}

/* ---- Blog ---- */

.blog_box {
	display:table;
	/*
	color:#555555;
	padding:0px 0px 0px 0px;
	vertical-align:top;
	width:600px;
	*/
	margin:0 0 20px 0;
	text-align:left;
}

.blog {
	vertical-align:top;
	display:table-cell;
	max-width:1024px;
	overflow:hidden;

}

.blog a:active {
  text-decoration: none;
  border-bottom: 1px dotted #888888;
}

.blog a:link {
  text-decoration: none;
  border-bottom: 1px dotted #888888;
}

.blog a:visited {
  text-decoration: none;
  border-bottom: 1px dotted #888888;
}

.blog a:hover {
  text-decoration: none;
  border-bottom: 1px solid #888888;
}

.blog span {
	 color:#000000;
}
.blog span a {
	 color:#888888;
	 font-weight:normal;
}

.blog .Resume {
	padding:0px;
	font-size:20px;
	line-height:23px;
	font-weight:200;
	display:inline-block;
	text-align:justify;
	margin:0px;
}

.blog .Body {
	font-family:helveticaneue,'helvetica neue',Helvetica,Arial,Sans-Serif;
	padding:0px;
	margin-top:15px;
	text-align:justify;
	font-size:14px;
}

.blog .Title {
	padding:5px 5px 5px 5px;
	margin:0px;
	font-size:35px;
	font-weight:700;
	color:#444444;
	background:#FFEE33;
	display:inline-block;
	clear:both;
	vertical-align:middle;
}

.blog .SubTitle {
	 padding:5px 5px 5px 5px;
	 margin:0px 0px 0px 10px;
	 color:#FFFFFF;
	 text-align:left;
	 font-weight:400;
	 font-size:25px;
	 background:blue;
	 display:inline-block;
	 clear:both;
	 vertical-align:middle;
}

.blog .h5 {
	padding:0px;
	margin:0px;
	display:inline;
	font-size:21px;
	font-weight:700;
	color:#444444;
}

.blog .h6 {
	padding:0px;
	margin:0px;
	display:inline;
	font-size:16px;
	font-weight:400;
	color:#777777;
}

.blog .Side {
	display:table-cell;
	vertical-align:top;
	display:none
	text-align:left;
}

.SideWidth {
	width:260px;
}

.SideImage {
	display:block;
	margin-top:5px;
	height:auto;
	border:0;
}

#SuggestText {
	text-transform:uppercase;
	font-size:14px;
	font-weight:400;
	line-height:16px;
	margin-top:0;
}

/* ---- public comment system ---- */

.CommentFormPrepare {
	padding:0;
	text-align:left;
	width:100%;
	margin:0 auto 0 auto;
}

#CommentFormName,#CommentFormEmail,#CommentFormLocation,#CommentFormContent {
	width:100%;
	padding:20px;
	font-size:15px;
	font-family:Helvetica,Sans-Serif;
	border:1px solid #aaa;
	margin-top:10px;
}

#CommentFormContent {
	height:100px;
}

#CommentFormButton {
	cursor: pointer;
  text-decoration: none;
	font-weight:bold;
	padding:10px 15px 10px 15px;
	border: 0px;
	background-color:#666;
	color:#eee;
	border-radius:3px;
	margin-top:10px;
}

#CommentFormButton:hover {
	background-color:#bbb;
}

#CommentForm .Label {
	font-weight:400;
	color:#666;
	font-size:13px;
}

.CommentFormValidate {
	background:#aaa;
	padding:30px;
	vertical-align:middle;
	text-align:center;
	margin:10px 0px 10px 0px;
}

#CommentShow {
	margin:30px 20px 20px 20px;
	line-height:1.5em;
}

#CommentShowName {
	padding:0px;
	margin:10px 0px 0px 0px;
	display:inline-block;
	color:#666;
	font-weight:bold;
}

#CommentShowLocation {
	padding:0px;
	margin:0px 0px 0px 4px;
	display:inline-block;
	font-size:12px;
}

#CommentShowDate {
	color:#aaa;
	font-size:12px;
	padding:0px;
	margin:0px 0px 0px 4px;
	display:inline-block;
}

#CommentShowContent {
	padding:0px 0px 5px 0px;
	margin:0px 0px 0px 10px;
	display:block;
	font-style:italic;
	text-align:justify;
}

#CommentShowOne {
	padding:5px 10px 5px 10px;
}

#CommentShowOne:hover {
	background:#eee;
}

#CommentShowContent:Before { Content:"“" }
#CommentShowContent:After { Content:"”" }

/* ----------------------------------------------------------------------- */
/* -- FINAL BIG IMAGE ARTWORK DISPLAY ------------------------------------ */
/* ----------------------------------------------------------------------- */

.ArtworkImage {
  max-width:100%;
  height: auto;
}

.ArtworkDescription {
	font-size:16px;
	margin:20px;
	text-transform:uppercase;
	line-height:1.4em;
	font-weight:300;
}

.image_link {
  font-variant: small-caps;
  letter-spacing:3px;
  margin:0px;
  font-size:12px;
}

.ArtworkTag {
	margin:5px;
	border-radius:5px;
	display:inline-block;
	border:1px solid #aaa;
	font-size:11px;
	color:#aaa;
	padding:5px 10px 5px 10px;
	vertical-align:middle;
}

/* ----------------------------------------------------------------------- */
/* -- IMAGE THUMBNAIL SQUARE --------------------------------------------- */
/* -- https://css-tricks.com/a-grid-of-logos-in-squares/ ----------------- */
/* ----------------------------------------------------------------------- */

@media only screen and (min-width: 1600px) {
  .ArticleListContainerGrid {
    grid-template-columns: repeat(4, minmax(100px, 300px));
  }
}

@media only screen and (max-width: 1599px) and (min-width: 1024px) {
  .ArticleListContainerGrid {
    grid-template-columns: repeat(3, minmax(100px, 300px));
  }
}

@media only screen and (max-width: 1022px) {
  .ArticleListContainerGrid {
    grid-template-columns: repeat(2, minmax(100px, 300px));
  }
}

.ArticleListContainerGrid {
	display:grid;
	grid-gap:3vw;
	justify-content: center;
}

.Thumbnail {
}

.Thumbnail .Image {
  position: relative;
  background-color:#ddd;
}

.Thumbnail .Image::before {
  content: "";
  padding-bottom: 100%;
  display: block;
}

.Thumbnail img {
	position: absolute;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition:all 0.4s ease-in-out;
}

.Thumbnail img:hover {
	filter:invert(100%) sepia(100%);
}

.Thumbnail .Horizontal {
	width:100%;
	height:auto;
}

.Thumbnail .Vertical {
	width:auto;
	height:100%;
}

.Thumbnail .Label {
	margin:10px 10px 0 10px;
	font-weight:300;
	font-size:20px;
	text-align:left;
}

.Thumbnail a {
	text-decoration:none;
}

/* ----------------------------------------------------------------------- */
/* -- SOCIAL NETWORK SHARING --------------------------------------------- */
/* ----------------------------------------------------------------------- */

.SocialScale {
	transition:all 0.4s ease-in-out;
}

.SocialScale:hover {
	transform:scale(1.2);
}

.SocialIcon {
	width:20px;
	height:auto;
}

.SocialOpacity {
	opacity:0.5;
}

.SocialOpacity:hover {
	opacity:0.9;
}