/*******
ADMIN MENU
********/
#ico-menu-wrap {
	float: right;
	padding: 0.5em;
	cursor: pointer;
	background-color: #ddd;
	outline: 0;
}



/** menu universal style **/
.menu {
	position: absolute;
	top: 0;
	right: 100%;
	display: none;
	font-size: 150%;
}
.menu li {
	position: relative;
	white-space: nowrap;
	background-color: #999;
}
.menu li a {
	display: block;
	padding: 0.4em 1em 0.4em 1.3em;
	color: #fff;
}
.menu li:hover {
	background-color: #888;
}

/*520*/
@media (min-width: 520px) {
	.menu {
		font-size: 100%;
	}
}




/** submenu only **/
.menu li ul {
	position: absolute;
	top: 0;
	right: 100%;
}
.menu li ul {
	display: none;
}

/** submenu item popup **/
.menu li:hover ul {
	/*display: block;*/
}


.parent-menu {
	outline: 0;
}
.parent-menu:before {
	font-family: 'material';
	content: "\e145";
	position: absolute;
	top: 0.4em;
	left: 0.2em;
	font-size: 100%;
	color: #ccc;
}
.parent-menu.remove:before {
	content: "\e15b";
}




.menu li:hover:nth-child(n+5) {
	background-color: #999;
}
.menu li span {
	display: block;
	padding: 0.4em 1em 0.4em 1.3em;
	color: yellow;
}

.menu li span#dyn-all,
.menu li span#dyn-yes,
.menu li span#dyn-no {
	display: inline;
	padding: 0;
}






/*******
MENU TAB
********/
.menu-tab {
	text-align: center;
	border-bottom: 1px solid #aaa;
	margin-bottom: 1.5em;
	/* background-color: orange; */
}
.menu-tab:after {
	content: '';
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}

.menu-tab li {
	position: relative;
	display: inline-block;
	padding: 0.5em 1em;
	border: 1px solid #aaa;
	/* background-color: pink; */
	z-index: 99;
	margin-bottom: -2px;
	line-height: 1;
}

.menu-tab li a {
	color: #999;
}

.menu-tab li.cur {
	border-bottom: 2px solid white;
}
.menu-tab li.cur a {
	color: #666;
	font-weight: bold;
}

/* 520 */
@media (min-width: 520px) {
	.menu-tab li.cur {
		border-bottom: 1px solid white;
	}
	.menu-tab li {
		margin-bottom: -1px;
	}
}




/********
LAYOUT
********/
#main {
	min-height: 100%;
	padding: 1em 2em;
	margin-bottom: -5em;
	/*margin-left: 8em;*/
	/*background-color: skyblue;*/
}
#main:after {
	content: '';
	display: block;
	height: 6em;
}

#main-login {
	width: 100%;
	height: 100%;
	padding-bottom: 5em;
	/*background-color: skyblue;*/
}

#main-login {
	width: 100%;
	height: 100%;
	padding-bottom: 5em;
	/*background-color: #ddd;*/
}

#footer {
	height: 5em;
	padding-top: 1em;
	padding-left: 2em;
	padding-right: 2em;
	text-align: center;
	/*background-color: #ddd;*/
}

.logo {
	margin: 1em 0 0 1em;
}


/********
ADMIN FACTS
**********/
.admin-facts {
	display: flex;
	padding-bottom: 1em;
	justify-content: center;
}

.admin-facts li {
	padding: 0.5em 1em;
	margin: 0 0.5em;
	border-radius: 10px;
	text-align: center;
	border: 1px solid #888;
}

.admin-facts li span {
	font-size: 3rem;
}





/**********
PHOTOS
*********/
.list-photos {
	max-width: 600px;
	margin: 0 auto;
	padding: 1em 0;

	/*background-color: skyblue;*/
}
.list-photos:after {
	content: '';
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}

.list-photos li {
	position: relative;
	padding: 1px 0;
}

.list-photos li img {
	width: 100%;
}

/* 520 */
@media (min-width: 520px) {
	/*.list-photos {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
		-webkit-column-gap: 1em;
		-moz-column-gap: 1em;
		column-gap: 1em;
	}*/
	.list-photos li {
		/*float: left;
		width: 50%;
		height: 50vw;
		padding: 1em;*/
		/*background-color: lightgreen;*/
	}

	.list-photos li:nth-child(odd) {
		/*background-color: lightblue;*/
	}
}

/* 770 */
@media (min-width: 770px) {
	/*.list-photos {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}*/
}


.mosaicflow__column {
  float: left;
}
.mosaicflow__item img {
  display: block;
  width: 100%;
  height: auto;
}




.btn-action-overlay-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/*background-color: lightblue;*/
	/*opacity: .5;*/
}
.list-photos li:nth-child(odd) .btn-action-overlay-wrap {
	/*background-color: lightgreen;*/
}

.btns-wrap {
	position: absolute;
	bottom: 1em;
	width: 100%;
	text-align: center;
	/*background-color: purple;*/
}

.btns-wrap > ul > li {
	display: inline-block;
	font-size: 1rem;
	margin: 0 0.1em;
	padding: 4px 9px;
	color: #fff;
	cursor: pointer;
	border-radius: 0.2em;
	/*background-color: yellow;*/
}
.btns-wrap li:nth-child(1) { background-color: dodgerblue; }
.btns-wrap li:nth-child(2) { background-color: mediumseagreen; }
.btns-wrap li:nth-child(3) { background-color: orangered; }


[class*="wait-done-"] {
	display: none;
	font-size: 1.2rem;
	padding: 0.2em 0.5em;
	margin-bottom: 0.6em;
	border-radius: 0.2em;
	border: 1px solid #888;
	background-color: lemonchiffon;
}

.btns-wrap li.btn-fade {
	background-color: #bbb;
}
.btns-wrap li.btn-fade:hover {
	background-color: #999;
}




/**********
IMAGES
***********/
.crop {
	position: relative;
	min-width: 100px;
	min-height: 100px;
	max-width: 300px;
	overflow: hidden;
	margin: 1em;
	float: left;
	background-color: #aaa;
}
.crop img {
	position: absolute;
	left: 50%;
	top: 50%;
	max-width: inherit;
	height: 100%;
	width: auto;
	-webkit-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
	cursor: pointer;
}
.crop img.port {
	height: auto;
	width: 100%;
}


.media-wrap {
	display: block;
}
.media-wrap:after {
	content: '';
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}


.media-info-wrap {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 20em;
	height: 16em;
	-webkit-transform: translate(-10em, -8em);
		-ms-transform: translate(-10em, -8em);
			transform: translate(-10em, -8em);
	display: none;
	z-index: 9;

	background-color: skyblue;
}


/***********
POPUP MODAL
**********/
#dim {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: .5;
	z-index: 2;
	display: none;
}


/***********
LOGIN FORM
**********/
.form-login-wrap {
	width: 300px;
	height: 100%;
	margin: 0 auto;
	display: table;
	/*background-color: #ddd;*/
}
.form-login {
	width: 100%;
	/*background-color: #888;*/
	display: table-cell;
	vertical-align: middle;
}
.form {
	padding: 1.7em 2em;
	background-color: #eee;
}

.form h1 {
	text-align: center;
	font-size: 1.1em;
	padding: 0 0 1em 0;
}

.logo-login {
	display: block;
	width: 60%;
	margin: 0 auto;
	padding: 2em 0;
}

.rem-me-wrap {
	padding: 1em 0;
}


/**************
ADMIN
************/
.logo-content {
	display: block;
	width: 100px;
	margin: 10px 0;
}

.admin-title {
	display: block;
	text-align: center;
	padding: 0 1em;
	font-size: 1.2rem;
	/* background-color: #ddd; */
}

/** CLIENT FORM ***/
.client_form {
	/*background-color: pink;*/
}
.client_form > div,
.show_form > div {
	margin-bottom: 1.5em;
	clear: both;
}

.field_for_title {
	font-size: 150% !important;
}

.client_form label span {
	font-size: 0.8em;
	font-weight: normal;
	font-style: italic;
	color: orangered;
	margin-left: 1em;
}

.form-3-col {
	clear: both;
	width: 100%;
}
.form-3-col > div {
	float: left;
	width: 50%;
	margin-bottom: 1.5em;

	/*background-color: pink;*/
}
.form-3-col > div:first-child {
	padding-right: 1em;
}
.form-3-col > div:last-child {
	padding-left: 1em;
}


.list-inline-block li {
	display: inline-block;
	padding: 0 1em;
}


.client_form em {
	font-size: 0.8em;
	font-weight: normal;
}





/*****************
ADMIN CLEINTS LIST
******************/
.clients_list > li {
	border: 1px solid #aaa;
	margin: 0.3em 0;
	font-size: 1rem;
}

.clients_list a {
	padding: 0.5em;
	display: block;
	color: #888;
	/*background-color: #eee;*/
}
.clients_list a:hover {
	color: #555;
	background-color: #eee;
}

.client_tbl_list {
	display: table;
	width: 100%;
}
.client_tbl_list li {
	display: table-cell;
	vertical-align: middle;
	/*background-color: yellow;*/
}
.client_tbl_list li:first-child {
	width: auto;
}
.client_tbl_list li:first-child:hover {
	background-color: #eee;
}
.client_tbl_list li {
	width: 2em;
}


/************
ADMIN PHOTOS
*************/
.admin-photos-list span {
	font-size: 0.75rem;
}

.admin-photos-list {
	list-style: decimal;
}

.admin-photos-list li {
	list-style-type: decimal;
	margin-left: 2.2em;
}



.admin-photos-grid-filter {
	display: block;
	text-align: center;
	padding-bottom: 2em;
}
.admin-photos-grid-filter li {
	display: inline-block;
	padding: 0.5em 1em;
	font-size: 0.85rem;
}
.admin-photos-grid-filter li:hover {
	border-radius: 0.3em;
	background-color: lightgreen;
	cursor: pointer;
}
.admin-photos-grid-filter li:hover a {
	color: #fff;
}
.grid-filter-cur {
	padding: 0.5em 1em;
	border-radius: 0.3em;
	background-color: lightgreen;
}
.grid-filter-cur a,
li.grid-filter-cur:hover a {
	color: #555;
}






.admin-photos-grid-wrap > ul > li {
	width: 48%;
    height: 48vw;
	padding: 1em;
	margin: 1%;
    float: left;
	border-radius: 0.3em;
	text-align: center;
	position: relative;
	background-color: #222;
}
/*.admin-photos-grid-wrap > ul > li:nth-child(odd) {
	background-color: lightblue;
}*/
.admin-photos-grid-wrap > ul > li img {

}
.admin-photos-grid-wrap > ul > li.port img {
	width: auto;
	height: 100%;
}
.admin-photos-grid-wrap > ul > li.land img {
	width: 100%;
	height: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

/*680*/
@media (min-width: 680px) {
	.admin-photos-grid-wrap > ul > li {
		width: 31.3%;
	    height: 31.3vw;
	}
}

/*1080*/
@media (min-width: 1080px) {
	.admin-photos-grid-wrap > ul > li {
		width: 23%;
	    height: 23vw;
	}
}

/*1620*/
@media (min-width: 1620px) {
	.admin-photos-grid-wrap > ul > li {
		width: 18%;
	    height: 18vw;
	}
}



.admin-photo-grid-overlay {
	position: absolute;
	left: 0;
	width: 100%;
	font-size: 0.8rem;
	/*opacity: .5;*/
	/*background-color: orange;*/
}
.admin-photo-grid-overlay span {
	display: inline-block;
	padding: 0.5em 1em;
	margin: 0 auto;
	color: #fff;
	background-color: #222;
	border-radius: 0.3em;
}

.admin-photos-grid-wrap li.port .admin-photo-grid-overlay.bottom {
	bottom: 1em;
}
.admin-photos-grid-wrap li.land .admin-photo-grid-overlay.bottom {
	bottom: 4.5em;
}

.admin-photos-grid-wrap li.port .admin-photo-grid-overlay.top {
	top: 1em;
}
.admin-photos-grid-wrap li.land .admin-photo-grid-overlay.top {
	top: 4.5em;
}


/**********
CLIENT INFOS
***********/
.c-info-entire {
	position: fixed;
	background-color: #fff;
	width: 100%;
	z-index: 999;
	padding-bottom: 1em;
}

.c-info-wrap {
	text-align: center;
}

.c-info {
	/* background-color: khaki; */
}

.c-info li {
	display: inline-block;
	padding: 5px 15px;
}

.c-info-wrap > div {
	padding-bottom: 5px;
}

.c-info-ex {
	display: flex;
	justify-content: center;
	/* background-color: #888; */
}

.c-info-ex > span {
	padding: 0 10px;
	white-space: nowrap;
}

.c-info-ex span:first-child {
	text-align: left;
}

.c-info-ex span:nth-child(2) {
	text-align: right;
}





/**********
paginate
***********/
.paginate {
	margin: 0 auto;
	clear: both;
	text-align: center;
	display: block;

	/*background-color: khaki;*/
}

.paginate li {
	display: inline-block;
	background-color: #999;
	margin: 0 3px 4px 3px;
	line-height: 1;
	font-size: 0.8rem;
}

.paginate li.dot {
	color: #999;
	background-color: transparent;
}
.paginate li.pgnum {
	background-color: #999;
	color: #fff;
	padding: 7px 7px;
	border-radius: 3px;
	font-size: 1rem;
}

.paginate a,
.paginate a:visited,
.paginate a:active {
	background-color: #FFF;
	padding: 3px 7px;
	margin: 0;
	border: 1px solid #999;
	font-weight: normal;
	color: #999;
	border-radius: 3px;
}

.paginate a:hover {
	background-color: #999;
	color: #FFF;
}



/*********
icon filter
***********/
.rec-list-filter {
	text-align: center;
	/*background-color: khaki;*/
	padding-bottom: 1em;
}

.rec-list-filter li {
	display: inline-block;
	margin: 0 1em;
}

.rec-list-filter a {
	color: #999;
}




/******
ALERT
********/
.alert-box {
	text-align: center;
	color: #555;
	margin-bottom: 1em;
	padding: 1em;
	background-color: lightgreen;
}




/********
FOOTER
********/
.footer-wrap {
	font-size: 0.8rem;
}



/***********
MISC
***********/
.upload-msg {
	margin: 2em;
}


.ico {
	padding: 0;
	font-size: 2rem;
	height: 1.25em;
	width: 1.25em;
	line-height: 1.25em;
	text-align: center;
	display: block;
	/*background-color: #aaa;*/
}

.ico-main-menu {
	padding: 0;
	font-size: 2rem;
}

a.inactive {
	/*pointer-events: none;*/
	color: #999;
	cursor: help;
}

.dscrp-small {
	font-size: 0.75rem;
	font-style: italic;
	color: #888;
}

.inline {
	display: inline;
}

.exhi-add-this-artist {
	display: inline-block;
	width: auto;
	font-size: 80%;
	cursor: pointer;
}

.exp-msg {
	color: orangered;
	display: block;
	text-align: center;
}


.title-filter {
	display: block;
	text-align: center;
}

.space-height-2em {
	display: block;
	height: 2em;
}

.space-height-1em {
	display: block;
	height: 1em;
}

.space-height-05em {
	display: block;
	height: 0.5em;
}

#scroll-to-top {
	position: fixed;
	bottom: 10px;
	right: 20px;
	display: none;
	cursor: pointer;
	z-index: 9999;
}