body {
	margin: 0;
	font-family: 'Font Awesome', 'Roboto Condensed', sans-serif;
	color: #efefef;
	overflow: hidden;
	position: fixed;
}

.body-wrapper {
	width: 100%;
	height: calc(100% - 8vh);
	overflow-x: hidden;
	overflow-y: scroll;
	margin: 8vh 0;
	position: fixed;
}

.header {
	padding: 2vh 1vh;
	background-color: #2191fb;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	font-size: 16pt;
	font-family: 'Lexend Deca', sans-serif;
	z-index: 2;
}

.header-content {
	max-width: 75%;
	margin: 0 auto;
	display: flex;
	align-items: center;
}

.header-content > div {
	display: inline-block;

}

.header-center {
	margin-left: 2em;
}

.header-center > a {
	margin: 0 0.25em;
	color: #ddd;
	text-shadow: 0 2px 1px rgba(0, 0, 0, 0.4);
	transition: all 0.2s ease-out;
}

.header-center > a:hover, .header-center > a.active {
	color: #fff;
}

.header-right {
	margin-left: auto;
	transition: all 0.2s ease-out;
}

.header-right:hover {
	filter: brightness(120%);
}

.body {
	max-width: 75%;
	margin: 1vh auto;
	display: flex;
	padding: 1vh;
	align-items: stretch;
}

.body > .side-content {
	flex: 1;
	background-color: #ccc;
}

.body > .main-content {
	flex: 3;
	background-color: #fff;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.body > * {
	margin: 1vh;
}

.logo {
	background: url('./res/logo.png') no-repeat;
	width: calc(467px / 2);
	height: calc(55px / 2);
	background-size: contain;
	background-position: center;
}

.patreon::before {
	content: '';
	background: url('./res/patreon.png') no-repeat;
	width: 1em;
	height: 1em;
	display: inline-block;
	background-size: contain;
	margin-right : 0.5em;
}

.patreon {
	padding: 0.1em;
	background-color: #f86754;
	display: inline-flex;
	align-items: center;
	padding: 0.5em 0.75em;
	font-family: 'Questrial', sans-serif;
	text-transform: uppercase;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
	font-size: 14pt;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

#patron-text {
	text-align: center;
	width: 180px;
}

a {
	text-decoration: none;
	color: #fff;
}

.flextable {
	display: flex;
	flex-flow: row;
	flex: 5;
	flex-wrap: wrap;
	background-color: #eee;
	justify-content: space-between;
}

.table-object {
	width: 278px;
	height: 320px;
	background-color: #fff;
	border: 1px solid #fff;
	margin: 1vh;
	display: flex;
	flex-flow: column;
	padding: 0.5em;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease-in;
}

.object-picture {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat !important;
	background-color: rgba(200, 200, 205, 255);
	border: 1px solid rgba(120, 120, 120, 0.4);
	height: 240px;
	border-radius: 8px;
	cursor: pointer;
}

.alert-wrapper {
	position: absolute;
}

.text-alert {
  position: relative;
  width: 144px;
  height: 36px;
  text-align: center;
  line-height: 38px;
  background-color: #2191fb;
  border-radius: 30px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.text-alert:before {
  content: ' ';
  position: absolute;
  left: 50%;
  top: 100%;
  border: 8px solid;
  border-color: #2191fb transparent transparent #2191fb;
}
.text-alert:after {
  content: ' ';
  position: absolute;
  left: calc(50% - 16px);
  top: 100%;
  border: 8px solid;
  transform: rotateY(180deg);
  border-color: #2191fb transparent transparent #2191fb;
}


.content-bar {
	display: flex;
	align-items: center;
	padding: 1em;
	background-color: #fefefe;
	border-bottom: 1px solid #ccc;
}

input[type="text"] {
	border: 0;
	border-radius: 4px;
	color: #000;
	background-color: #fdfdfd;
	padding: 0.5em;
}

input[type="text"]:focus {
	background-color: #fff;
	outline: none;
	border: 0;
}

.search-bar {
	display: inline-flex;
	border: 1px solid #ccc;
}

.search-bar:focus-within {
	border: 1px solid #2191fb;
}

.search-bar  > input[type="text"] {
	border-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}


.search-icon {
	padding: 0.5em;
	color: #777;
	border-left: 1px solid #ccc;
	display: inline-block;
}

.fa-circle-notch {
	animation-name: rotate;
	animation-iteration-count: infinite;
	animation-duration: 0.5s;
	animation-timing-function: linear;
}

.object-subtitle {
	font-style: italic;
	color: #ccc;
	width: 50%;
}

.object-info {
	opacity: 0;
	cursor: pointer;
	padding: 1em;
	color: #fff;
	text-shadow: 0 1px rgba(0, 0, 0, 0.4);
	background-color: #2dd066;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	margin-top: 1em;
	transition: all 0.1s ease-in;
}

.table-object:hover .object-info {
	opacity: 1;
}

.object-info:hover {
	filter: brightness(105%);
}

.object-title {
	font-family: 'Lexend Deca', sans-serif;
    color: #000;
    font-size: 18pt;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-bottom: 0.5em;
}
.page-bar {
	display: inline-flex;
	margin-left: auto;
	border-radius: 4px;
	border: 1px solid #ccc;
	background-color: #eee;
	color: #666;
}

.page-bar > * {
	padding: 0.5em;
	border-right: 1px solid #ccc;
	cursor: pointer;
	transition: all 0.15s ease-out;
}

.page-bar > *:hover {
	background-color: #fff;
}

.page-bar > *:last-child {
	border-right: none;
}

.page-bar > *.active {
	color: #2191fb;
	background-color: #fff;
	cursor: default;
}

.magical-info {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.25);
	z-index: 1;
}

.magical-info-container {
	background-color: #fff;
	border-radius: 8px;
	height: 60%;
	width: 50%;
	left: 50%;
	top: 50%;
	position: fixed;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
	display: flex;
}

.magical-main {
	width: 100%;
	flex: 6;
	background-color: #eee !important;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
}

.magical-side {
	flex: 3;
	width: 100%;
	background-color: #fff;
	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	display: flex;
	flex-flow: column;
	padding: 2em;
}

.magical-table {
	display: flex;
	flex-flow: column;
	border-radius: 4px;
	border: 1px solid #ccc;
}

.magical-row {
	width: 100%;
	display: flex;
	border-bottom: 1px solid #ccc;
}

.magical-row:last-child {
	border-bottom: 0;
}

.magical-cell {
	width: 100%;
	flex: 1;
	color: #000;
	padding: 0.25em;
	display: flex;
	align-items: center;
}

.magical-cell.key {
	font-weight: bold;
	text-align: right;
	border-right: 1px solid #ccc;
	background-color: rgba(33, 171, 251, 0.1);
	display: block;
}

.magical-cell.title {
	font-weight: bold;
	text-align: center;
	border-right: 1px solid #ccc;
	background-color: rgba(33, 171, 251, 0.1);
	display: block;
}

#result-count {
	color: #bbb;
	margin-left: 1em;
}

.footer {
	color: #bbb;
	text-align: center;
	margin-bottom: 5em;
}

.footer > p {
	margin: 0.5em auto;
}

.footer > p > a {
	color: #93cbff;
	transition: all 0.2s ease-out;
}

.footer > p > a:hover {
	color: #0183fb;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}