/* reset */
*,html,body,img,p,h1,h2,h3,ul,li,em,strong,i { margin:0; padding:0; border:none; list-style:none; font-size:inherit; font-weight: inherit; font-style: normal; box-sizing: border-box;}
body { background:#fff; font: 300 14px/1.1 'Poppins', sans-serif; color:#333; }
input,textarea { border:1px solid #aaa; outline: none; padding: 4px 6px; border-radius: 4px; font:inherit; }
select { border:1px solid #aaa; outline: none; padding: 4px; font:inherit; border-radius: 0 }
	input:focus,textarea:focus { outline:none; border:2px solid #0d7bdb; padding:3px 5px;   }
a:link, a:visited { text-decoration: none; color:#000 }

/* admin */
.admin_hd { position: sticky; background: #333; top:0; z-index:10; }
	.admin_hd ul { display: flex; justify-content: center; }
	.admin_hd a { display: block; padding:15px 15px; color:#bbb; text-decoration: none; cursor: pointer; }
	.admin_hd a:hover { color:#fff; }
	.admin_hd .sel a { color:#000; background: #fff; position: relative; top:10px; padding-top: 5px;}
	
.admin_object { max-width: 800px; margin:40px auto; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.2);  border:1px solid #ddd; }
	.admin_object_h { background: #fff; border-bottom: 1px solid #ccc; padding:10px; text-align: center; border-radius: 5px 5px 0 0 }
		.admin_object_h img { max-height: 300px; max-width: 80%; }
	.admin_object_c { padding:20px; background: #f6f6f6; }
		.admin_object_c hr { border-bottom: 1px solid #ddd; margin-bottom: 20px; }
		.admin_object_c p { margin-bottom: 15px; }
	.admin_object_f { border-top:1px solid #ccc; padding:20px; }

.admin_filter { max-width: 800px; margin:40px auto 0; display: flex; flex-direction: row; justify-content: space-between; }
.admin_titlelist {  max-width: 800px; margin:40px auto -20px; font-size:20px; }
.admin_list { display: flex; flex-direction: column; max-width: 800px; margin:40px auto; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.2);  border:1px solid #ddd; min-height: 70px; }
	.admin_list a { border-bottom:1px solid #eee; padding:10px; display: block; background: #fff}
	.admin_list a:last-child { border-bottom: none; } 
	.admin_list a:hover { background: #f8f8f8; }
	.admin_list.jsReorderable>* { cursor: move }
		.admin_list_row { padding: 10px; border-bottom: 1px solid #eee; display: flex; flex-direction: row; justify-content: space-between }

.admin_colorpicker { font-size:14px; }
	.admin_colorpicker label { display: inline-block; padding:3px 5px; display: inline-block; cursor:pointer; margin-bottom: 3px; }
	.admin_colorpicker label:hover { box-shadow: 0 0 3px rgba(0,0,0,0.5); }

.admin_grid { display: flex; flex-direction: row; flex-wrap: wrap;  max-width: 800px; margin:40px auto; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.2);  border:1px solid #ddd; justify-content: space-around; padding: 20px 0;}
	.admin_grid a { width: 165px; text-align: center; height: 130px; position: relative; margin:0 0 30px; }
	.admin_grid a img { max-width: 100%; max-height: 100% }
	.admin_grid a span { position: absolute; bottom:0; left:0; right:0; background: -webkit-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); padding:22px 0 0; }

.taglist { display: flex; flex-direction: row; flex-wrap: wrap; }
	.taglist label { margin-right: 20px; cursor: pointer}
	.taglist label:hover { text-decoration: underline }

.admin .btn,
.admin .btn:link,
.admin .btn:visited { background:#eee; color:#0d7bdb; border-radius: 4px; border:none; padding:6px 12px 7px; margin-right: 10px; }
	.admin .btn:hover { color:#000; box-shadow: 0 2px 2px rgba(0,0,0,0.3); }
	.admin .btn-main { background:#0d7bdb; color:#fff; }
	.admin .btn-main:hover { background: #0b4f8b; color:#fff; cursor:pointer; box-shadow: 0 2px 2px rgba(0,0,0,0.3); }


/* intro */

.intro { }
	.intro_i { z-index:1; position: fixed; top:50px; bottom:50px; left:50px; right:50px; display: flex; vertical-align: middle; justify-content: center; align-items: center; }
		.intro_i img { max-height: 80vh; max-width: 80vw; margin: auto; }
	.intro_h { z-index:100; position: fixed; top:0; left:0; right:0; height: 100px; line-height: 100px; font-size:24px; text-align: center }
	.intro_langues { z-index:100; position: fixed; bottom:0; left:0; right:0; height: 100px; text-align: center; display: flex; justify-content: center; align-items: center; }

.intro .btn {display: inline-block; border-radius: 20px; color:#555;padding:5px 15px; background:rgba(255,255,255,0.3) }
.intro .btn:hover {background:#eee; color:#000; }

	
/* grid */

.grid .btn {display: inline-block; border-radius: 20px; color:#555;padding:5px 15px; background:rgba(255,255,255,0.3) }
.grid .btn:hover {background:#eee; color:#000; }

.grid { display: flex; flex-wrap: wrap; border-top:1px solid #ccc; border-left:1px solid #ccc; margin: 20px auto; width:903px; }
	.grid_e { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; width: 300px; height:300px; overflow: hidden; position: relative}
		.grid_e-title { display: flex; flex-direction: column;  align-items: center; justify-content: center;  text-align: center; padding: 0 15px;}
			.grid_e-title .btn { margin-top: -20px; margin-bottom: 10px; }
			.grid_e-title h1 { font-size:30px; }
			
		.grid_e-family { overflow: hidden; position: relative }
			.grid_e-family a { position: absolute; top:0; right:0; left:0; bottom:0; display:flex; align-items: center; justify-content: center  }
			.grid_e-family img { transition:all 3s; max-width: 5000%; max-height: 5000% }
			.grid_e-family span { position: absolute; top:0; right:0; left:0; bottom:0; display:flex; align-items: center; justify-content: center; text-align: center; color:#fff; text-shadow: 0px 0px 3px black; transition:all 1s; display: flex; align-items: center; justify-content: center }
			.grid_e-family span em { display: inline-block; width: 160px; font-size: 20px;
line-height: 1.2; }
.grid_e-family.grid_e-family_nowArt img { max-width: 80%; max-height: 80%; transform: translate(0%,0%) scale(1) !important;}
.grid_e-family.grid_e-family_nowArt span { bottom:10px; top:initial; }
.grid_e-family.grid_e-family_nowArt span em { font-size:14px; color:#000; text-shadow: 0px 0px 3px white; transition: 1s all;}


	.grid_e-artpiece * { opacity: 1; transition:opacity 1s;}
		.grid_e-artpiece_hide * { opacity:0; }
		.grid_e-artpiece_fadeIn * { opacity:0; }
		.grid_e-artpiece a { position: absolute; top:0; right:0; left:0; bottom: 0;display: flex; align-items: center; justify-content: center;z-index: 5; padding-bottom: 20px; }
		.grid_e-artpiece img { max-width: 80%; max-height: 80%; }
		.grid_e-artpiece span { position: absolute; bottom: 10px; right:0; left:0; text-align: center; color:#000; text-shadow: 0px 0px 3px white; }
	
	.grid_e-expo {}
		.grid_e-expo a { position: absolute; top:0; right:0; left:0; bottom: 0;display: flex; align-items: center; justify-content: center;z-index: 5; padding-bottom: 30px; }
		.grid_e-expo img { max-width: 70%; max-height: 82%; }
		.grid_e-expo span { position: absolute; bottom: 10px; right:0; left:0; text-align: center; color:#000; text-shadow: 0px 0px 3px white; color:rgba(0,0,0,0.7); font-weight:100; font-size:13px; }
		.grid_e-expo strong { position: absolute; bottom: 27px; right:0; left:0; text-align: center; color:#000; text-shadow: 0px 0px 3px white; font-weight: 300; }
		
	.grid_e-picture {}
		.grid_e-picture a { }
		.grid_e-picture img { width: 100%; filter: grayscale(1); transition:all 2s; }
		.grid_e-picture a:hover img { width: 100%; filter: grayscale(0) }
		.grid_e-picture span { position: absolute; bottom: 10px; right:0; left:0; text-align: center; color:#fff; text-shadow: 0px 0px 3px black }
		
	.grid_e-solid { position: relative}
		.grid_e-solid a { position: absolute; top:0; right:0; left:0; bottom: 0;display: flex; flex-direction: column; text-align: center; align-items: center; justify-content: center;z-index: 5; font-size:20px; line-height:1.2;padding:0 20px; color: #fff; }
			.grid_e-solid-1 { background: #dc75d2; }
			.grid_e-solid-2 { background: #6f9156; }
			.grid_e-solid-3 { background: #d6c723; }
			.grid_e-solid-4 { background: #7a755f; }
			.grid_e-solid-5 { background: #5d6ad6; }
			.grid_e-solid-6 { background: url(i/rainbow.jpg) no-repeat; background-size: cover }

	.grid_e-text {}
		.grid_e-text a { position: absolute; top:0; right:0; left:0; bottom: 0;display: flex; flex-direction: column; text-align: center; align-items: center; justify-content: center;z-index: 5; font: italic 24px/1.2 'Playfair Display', serif; padding:0 20px; color: #fff; }
		.grid_e-text a i { font-size:0.7em; padding:10px 0; }
		.grid_e-text:nth-child(5n+1) a { background: #d6c723; }
		.grid_e-text:nth-child(5n+2) a { background: #7a755f; }
		.grid_e-text:nth-child(5n+3) a { background: #5d6ad6; }
		.grid_e-text:nth-child(5n+4) a { background: #dc75d2; }
		.grid_e-text:nth-child(5n+5) a { background: #6f9156; } 
	
	@media only screen and (max-width:950px)
	{
		.grid_e-text a { font-size:22px !important; }
	}


	.grid-onepiece { position: relative; }
		.grid-onepiece .grid_e-act { position: absolute; z-index: 5; width:100px; height: 100px; display: flex; align-items: center; justify-content: center;border:none; }
		.grid-onepiece .grid_e-back { top:0; left:0; }
		.grid-onepiece .grid_e-prev { bottom:0; left:0; }
		.grid-onepiece .grid_e-next { bottom:0; right:0; }
		.grid-onepiece .grid_e-onepiece { width: 100%; height: auto; text-align: center; display: flex;flex-direction: column; align-items: center; font-size: 14px; line-height: 1.5; padding: 20px; }
			.grid-onepiece .grid_e-onepiece img { max-width: 100%; max-height: 80vh;  height:auto; }
			.grid-onepiece .grid_e-onepiece em { color:#aaa; }
	
	.grid-onetext { position: relative; border:1px solid #ccc; justify-content: center }
		.grid-onetext .grid_e-act { position: absolute; z-index: 5; width:100px; height: 100px; display: flex; align-items: center; justify-content: center;border:none; }
		.grid-onetext .grid_e-back { top:0; left:0; }
		.grid-onetext article { max-width: 600px; font: 20px/1.7 'Playfair Display', serif; padding:100px 20px }
		.grid-onetext article h1 { font-size:50px; line-height: 1.1; margin-bottom: 40px; }
		.grid-onetext article i { font-style: italic; color:#666; }
		.grid-onetext article p { margin-bottom: 15px; text-indent: 60px; }
		.grid-onetext article p:first-of-type { text-indent: 0;}
		.grid-onetext article .noindent p { text-indent: 0 }
		.grid-onetext article h4 { font-weight:bold; margin: 50px 0 20px; color:#000; width: 100%; line-height: 1.7; }


	.grid-oneexpo { position: relative; border:1px solid #ccc; justify-content: center }
		.grid-oneexpo .grid_e-act { position: absolute; z-index: 5; width:100px; height: 100px; display: flex; align-items: center; justify-content: center;border:none; }
		.grid-oneexpo .grid_e-back { top:0; left:0; }
		.grid-oneexpo article { max-width: 600px; font: 20px/1.7 'Playfair Display', serif; padding:100px 20px; display: flex; flex-direction: column; align-items: center }
			.grid-oneexpo article img { max-width: 100%; max-height: 50vh;  height:auto; box-shadow: 0 0 5px rgba(0,0,0,0.5); margin-bottom: 40px; }
			.grid-oneexpo article h1 { font-size:40px; line-height: 1.1; margin-bottom: 20px; width: 100% }
			.grid-oneexpo article h2 { font-style: italic; color: #666; font-size:26px; margin: 20px 0;width: 100%; line-height: 1.1; }
			.grid-oneexpo article p { margin-top: 20px; width: 100%; }
			.grid-oneexpo article p.article_details { margin-top: 20px; font-size: 18px; color:#666; padding-top:20px; border-top:1px solid #eee;  }
	
			
@media only screen and (min-width:1350px)
{
	.grid { width:1204px; }
	.grid_e { width:300px; height: 300px; }
}
@media only screen and (max-width:950px)
{
	.grid { width:603px; }
	.grid_e { width:200px; height: 200px; }
	.grid-onepiece .grid_e-onepiece { padding: 120px 0; }
}
@media only screen and (max-width:650px)
{
	.grid { width:402px; }
	.grid_e { width:200px; height: 200px; }
}
@media only screen and (max-width:420px)
{
	.grid { width:302px; }
	.grid_e { width:150px; height: 150px; }
	.grid_e-title h1 { font-size:24px; }
	body { font-size:10px;}
	.grid_e-family span em { font-size:14px; }
	.grid_e-family.grid_e-family_nowArt span em { font-size:12px;}
	.grid_e-solid a { font-size:14px; }
}