:root {
	--dark-color: #15373C;
	--mid-color: #C1B082;
	--light-mid-color: #C1B08266;
	--light-color: #FFF;
}

* {box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;}
body {margin:0;background:#F5F5F5;color:var(--dark-color);font-size:16px;}

/*#site-header {background:var(--dark-color);color:var(--light-color);display:flex;justify-content:space-between;padding:20px;align-items:center;gap:20px;}*/
#site-header {backdrop-filter:blur(5px);background:linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,255,255,0.8));display:flex;justify-content:space-between;padding:20px;align-items:center;gap:20px;z-index:5;position:sticky;top:10px;border-bottom:1px solid #FFF;box-shadow:0 0 20px rgba(0,0,0,0.1);margin:0 10px;border-radius:10px;}

#site-header h1 {margin:0;font-weight:900;text-transform:uppercase;display:flex;}
#site-header h1 a {color:#FFF;text-decoration:none;display:block;}
#site-header h1 a svg {height:20px;display:block;}
#site-header h1 a svg path.t {fill:var(--dark-color);}
#site-header h1 a svg path.k {fill:var(--mid-color);}
#site-header h1 a:hover svg path.t {fill:var(--mid-color);}
#site-header h1 a:hover svg path.k {fill:var(--dark-color);}

#site-header nav {display:flex;gap:10px;justify-content:center;margin:-5px 0;align-items:center;}
#site-header nav a.link {color:var(--dark-color);border-radius:20px;line-height:30px;padding:0 10px;text-decoration:none;text-align:center;font-weight:bold;white-space:nowrap;}
#site-header nav a.link.active, #site-header nav a.link:hover {background:var(--light-mid-color);color:var(--dark-color);}

.ig-logo {height:20px;display:block;margin-left:20px;}
.ig-logo path.i, .ig-logo path.t {fill:var(--dark-color);}
.ig-logo path.k {fill:var(--mid-color);}
a:hover .ig-logo path.i, a:hover .ig-logo path.t {fill:var(--mid-color);}
a:hover .ig-logo path.k {fill:var(--dark-color);}

@media screen and (max-width:768px) {
	#site-header h1 a svg {height:auto;width:100%;display:block;}
	#site-header nav {margin:-7px 0;}
	#site-header nav a.link {width:30px;padding:0;}
	#site-header nav a.link span {display:none;}
	#site-header .ig {display:none;}
}

#site-body {padding:20px;}

h1 {text-align:center;width:100%;}
h2 {text-align:center;width:100%;}

.pills {display:flex;gap:10px;justify-content:center;}
.pills a {background:var(--light-mid-color);color:var(--dark-color);border-radius:20px;padding:10px 20px;text-decoration:none;}
.pills a:hover {background:var(--dark-color);color:var(--light-color);}
.pills a.active {background:var(--dark-color);color:var(--light-color);}
.pills a.active:hover {background:var(--light-mid-color);color:var(--dark-color);}

@media screen and (max-width:768px) {
	.pills {font-size:14px;}
	.pills a {padding:5px 10px;}
}

p.note {text-align:center;font-style:italic;margin:20px 0;font-size:12px;}

.group {
	display:flex;flex-wrap:wrap;gap:20px;
}
.item {
	display: flex;
	padding: 20px;
	gap:20px;
	border: 1px solid #CCC;
	width: calc(50% - 10px); /*calc((100% - 40px) / 3);*/
/*	background: radial-gradient(80% 90%,#FFF,#f5f5f5);*/
	background: linear-gradient(to top,#FFF,#f5f5f5);
	border-radius: 10px;
	border-top-color: #FFF;
	border-left-color: #FFF;
	border-right-color: #EEE;
	border-bottom-color: #EEE;
	box-shadow: 5px 5px 15px #EEE, -5px -5px 15px #FFF;
	flex-wrap:wrap;
	align-items:center;
}

@media screen and (max-width:768px) {
	.item {width:100%;}
}

.item .img {
	background-size:cover;
	background-position:center 70%;
	width:200px;
	aspect-ratio:10/6;
	flex-shrink:0;
}
.item .item-rows {display:flex;flex-direction:column;flex:1;gap:20px;}
.item .item-row {display:flex;flex-direction:row;width:100%;align-items:center;gap:20px;}
.item .detail {font-size:12px;flex:1;}
.item .detail p {margin:0;}
.item .detail p + p {margin-top:5px;}
.item .detail .name {font-weight:bold;font-size:18px;}
.item .detail .code {font-size:14px;}

.item .colors {display:flex;gap:5px;width:600px;align-items:center;font-size:10px;}
.item .colors .color {flex:1;padding:10px;border-radius:3px;width:160px;}
.item .colors .color p {margin:0;}
.item .colors .color p + p {margin-top:5px;}
.item .colors .color p:first-child {font-weight:bold;font-size:12px;}

.item .color-chips {display:flex;gap:20px;align-items:center;font-size:12px;margin-top:10px;flex-wrap:wrap;}
.item .color-chips .color-chip {display:flex;align-items:flex-start;gap:5px;}
.item .color-chips .color-chip .chip {width:15px;height:15px;border-radius:15px;}
.item .color-chips .color-chip strong {display:block;}

.item .date {display:flex;flex-direction:column;text-align:center;width:90px;border:3px solid var(--dark-color);border-radius:90px;overflow:hidden;font-weight:bold;}
.item .date .d {font-size:36px;line-height:45px;padding-top:6px;}
.item .date .m {font-size:14px;line-height:30px;padding-bottom:2px;text-transform:uppercase;background:var(--dark-color);color:var(--light-color);}
.item .date .m span {font-weight:normal;}


@media screen and (max-width:768px) {
	.item {flex-direction:column-reverse;}
	.item .img {width:120px;}
	.item .item-rows {width:100%;}
	.item .item-row {align-items:flex-start;}
	.item .color-chips {flex-direction:column;align-items:flex-start;gap:5px;}
	.item .color-chips .color-chip {align-items:center;}
	.item .color-chips .color-chip strong {display:initial;}
	
	.item .date {flex-direction:row;width:auto;}
	.item .date .d, .item .date .m {line-height:40px;}
	.item .date .d {font-size:25px;padding:0 10px 0 15px;}
	.item .date .m {font-size:20px;padding:0 15px 0 10px;white-space:nowrap;}
}


#site-footer {padding:20px;display:flex;width:100%;align-items:center;gap:20px;}
#site-footer p {font-size:12px;margin:0;font-style:italic;flex:1;}
#site-footer .logo {height:12px;display:block;}
#site-footer .logo .t {fill:var(--dark-color);}
#site-footer .logo .k {fill:var(--mid-color);}
#site-footer .ig-logo {height:20px;margin:-4px 0;}
@media screen and (max-width:768px) {
	#site-footer {flex-direction:column;text-align:center;}
}



/* admin */

form {width:100%;margin:20px 20px 40px;}
table.edit-table {margin:20px 20px 40px;border-collapse:collapse;width:100%;}
table.edit-table, table.edit-table * {font-size:12px;}
form > table.edit-table {margin:0;}
table.edit-table th, table.edit-table td {padding:10px;border:1px solid #DDD;vertical-align:top;}
table.edit-table thead tr th {text-align:left;}
table.edit-table tbody tr th {width:100px;text-align:left;}
table.edit-table input[type="text"], table.edit-table textarea {width:100%;padding:10px;border-radius:3px;border:1px solid var(--light-color);}
table.edit-table select {padding:10px;border-radius:3px;background:#FFF;border:1px solid var(--light-color);}
table.edit-table td ul {margin:0;list-style-type:none;padding-left:0;}
table.edit-table td > ul {display:flex;flex-direction:row;flex-wrap:wrap;}
table.edit-table td > ul > li {width:180px;}
table.edit-table td ul ul {padding-left:20px;margin-bottom:10px;}
table.edit-table td ul li:last-child ul {margin-bottom:0;}
table.edit-table td ul li {margin:0;}

.login-wrapper {margin:0 auto;display:flex;justify-content:center;}	
.login-wrapper .login {width:300px;margin:40px 20px;display:flex;flex-direction:column;}
.login-wrapper .login input[type="text"], .login-wrapper .login input[type="password"] {width:100%;padding:10px;border-radius:3px;border:1px solid var(--mid-color);}
.login-wrapper .login input[type="submit"] {width:100%;padding:10px;}
.login-wrapper .login input + input {margin-top:10px;}

.button {background:var(--dark-color);color:var(--light-color);text-decoration:none;padding:5px 10px;border-radius:3px;border:0 none;cursor:pointer;display:inline-block;text-align:center;}
.button:hover {background:var(--mid-color);color:var(--dark-color);}
.button.full-button {width:100%;padding:10px 20px;}