/* 
***********************************************************
MYANIMELIST MODERN STYLE -- CODE NAME 'MIRAI' -- BY LUKELC
***********************************************************

Recommended list settings for this theme:

Anime: Numbers, Score, Type, Episodes, Images ENABLDED

Manga: Numbers, Score, Type, Chapters, Images ENABLED

If you like this theme, leave a comment on my profile! It really
does make my day. http://myanimelist.net/profile/LukeLC

Also check out my website: http://www.thinkboxly.com/

Want this theme for your anime list? Copy the following code into
your theme's CSS box! Use any cover and background images you like!

@import url(https://dl.dropboxusercontent.com/u/55297803/MAL%20-%20Mirai.css);

If you copy this theme, please be kind and keep this header as
attribution!

Thanks for stopping by!
*/


/*
ANIMATIONS
*/

@-webkit-keyframes fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
}
@-moz-keyframes fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
}
@keyframes fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
}

@-webkit-keyframes grow-in {
   from { width: 0%; height: 0%; }
   to { width: 100%; height: 100%; }
}
@-moz-keyframes grow-in {
   from { width: 0%; height: 0%; }
   to { width: 100%; height: 100%; }
}
@keyframes grow-in {
   from { width: 0%; height: 0%; }
   to { width: 100%; height: 100%; }
}

@-webkit-keyframes expand {
   from { height: 0px; }
   to { height: 90px; }
}
@-moz-keyframes expand {
   from { height: 0px; }
   to { height: 90px; }
}
@keyframes expand {
   from { height: 0px; }
   to { height: 90px; }
}


/*
GLOBAL
*/

@import url(http://fonts.googleapis.com/css?family=Muli:300);

* {
	font-family: Muli, sans-serif;
	font-weight: 300;
}

a, .header a {
	color: rgba(255,255,255,0.8);
	border-bottom: 1px solid transparent;
	text-decoration: none !important;
	transition: all 0.15s ease-in-out;
}

a:hover {
	color: #FFF;
	border-bottom: 1px solid #FFF;
}

body {
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

body::after {
	content: "";
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	z-index: -1;
}

.list-container {
	background-color: transparent;
	margin-bottom: 50px;
}

.header, .list-container, .cover-block, .status-menu-container, .list-unit {
	width: 100%;
	border: none;
}

.list-block {
	width: 80%;
	margin: 0px auto;
}

.list-table {
	display: table-row;
}

.cover-block .image-container .btn-list-setting {
	position: fixed !important;
	z-index: 9999;
}


/*
HEADER/NAVBAR
*/

.search-container {
	display: none;
}

.header {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	z-index: 9999;
}

.header .header-title {
	top: 5px;
	left: 57px;
	padding: 12px;
	background-position: center center;
	background-size: auto 24px;
	width: 160px;
	height: 28px;
	opacity: 0.8;
}

.header .header-title:hover {
	opacity: 1;
}

.header .header-menu.other {
	top: 0px;
	padding: 8px;
}

.header .header-menu .btn-menu {
	color: rgba(255,255,255,0.8);
	margin-top: -6px;
	margin-right: 10px;
}

.header .header-menu.other .btn-menu, .header .header-menu .header-info {
	font-size: 12px;
	margin-top: 0px;
	text-shadow: 0px 3px 3px #000;
}

.header .header-menu .list-menu {
	top: 58px;
	right: 0px;
	width: 115px;
	height: 32px;
	background-color: #000;
	border: 0px solid transparent;
	border-top: 1px solid #FFF;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
	z-index: 9999;
	opacity: 0;
}

.header .header-menu .list-menu[style^="display: block;"] {
	-webkit-animation: fade-in 0.15s forwards ease-in;
	-moz-animation: fade-in 0.15s forwards ease-in;
	animation: fade-in 0.15s forwards ease-in;
}

.header .header-menu .list-menu[style^="display: block;"]::after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background-color: #000;
	position: relative;
	bottom: 36px;
	left: 50%;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.header .header-menu .list-menu .icon-menu svg.icon {
	fill: rgba(255,255,255,0.8);
	top: 5px;
	transition: fill 0.15s ease-in-out;
}

.header .header-menu .list-menu .icon-menu .text {
	color: rgba(255,255,255,0.8);
	font-size: 11px;
	text-shadow: 0px 3px 3px #000;	
	top: 7px;
	left: 42px;
	white-space: nowrap;
	transition: color 0.15s ease-in-out;
}

.header .header-menu .list-menu .icon-menu:hover {
	background-color: transparent;
	border-bottom: 1px solid transparent;
}

.header .header-menu .list-menu .icon-menu:hover svg.icon {
	fill: #FFF;
}

.header .header-menu .list-menu .icon-menu:hover .text {
	color: #FFF;
}

.status-menu-container {
	padding-top: 2px;
	height: 56px;
	background-color: rgba(0,0,0,0.8);
	box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
	z-index: 9998;
}

.status-menu-container .status-menu {
	border-spacing: 0px;
	width: 70%;
	text-align: center;
}

.status-menu-container .status-menu .status-button {
	color: rgba(255,255,255,0.8);
	display: inline-block;
	margin: 0px 3%;
	padding: 16px 0px 17px 0px;
	text-shadow: 0px 3px 3px #000;
	font-size: 18px;
}

.status-menu-container .status-menu .status-button:hover, .status-menu-container .status-menu .status-button.on {
	color: rgba(255,255,255,1);
	border-bottom: 1px solid #FFF;
}

.status-menu-container .status-menu .status-button::after {
	display: none;
}


/*
LIST MENU
*/

.list-menu-float {
	top: 0px;
	left: 0px;
	width: 58px;
	height: 58px;
	overflow-y: hidden;
	border: none;
	z-index: 9999;
	transition: height 0.3s ease-in-out;
}

.list-menu-float:hover {
	height: 400px;
}

.list-menu-float .icon-menu {
	width: 58px;
	height: 58px;
	background-color: #000;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
}

.list-menu-float::after {
	content: "";
	width: 8px;
	height: 8px;
	background-color: #000;
	position: absolute;
	top: 54px;
	left: 25px;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
}

.list-menu-float:hover::after {
	opacity: 1;
}

.list-menu-float .icon-menu.profile {
	opacity: 0.8;
	transition: 0.15s ease-in-out;
}

.list-menu-float:hover .icon-menu.profile {
	opacity: 1;
	border-bottom: 1px solid #FFF;
}

.list-menu-float .icon-menu svg {
	left: 19px !important;
	top: 19px !important;
}

.list-menu-float .icon-menu svg.icon {
	fill: rgba(255,255,255,0.8);
	transition: all 0.15s ease-in-out;
}

.list-menu-float .icon-menu:not(.profile) {
	border-bottom: 0px solid transparent !important;
}

.list-menu-float .icon-menu:hover:not(.profile) {
	background-color: #000;
	width: 58px;
}

.list-menu-float .icon-menu .text {
	display: none;
}


/*
COVER IMAGE
*/

.cover-block .image-container {
	position: relative;
	padding-top: 0px;
	width: 100%;
	max-height: 400px;
	display: block;
	overflow: hidden;
	background-color: rgba(0,0,0,0.71);
}

.cover-block .image-container::after {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 400px;
	background-color: rgba(0,0,0,0.3);
}

.cover-block .image-container img {
	max-width: 100%;
}


/*
LIST STATUS
*/

.list-unit .list-status-title .text, .list-table .list-table-header .header-title.number, .list-table .list-table-header .header-title.image, .list-table .list-table-header .header-title.status {
	display: none;
}

.list-unit .list-status-title {
	margin: 115px 0px 121px 0px;
	display: block;
	width: 450px;
	background-color: transparent;
	position: absolute;
	right: 10%;
}

.list-table > tbody:not(.list-item) {
	margin: 100px 0px;
	display: block;
	width: 80%;
	background-color: transparent;
}

.list-table .list-table-header .header-title {
	background: transparent;
	border-bottom: none;
	color: rgba(255,255,255,0.8);
}

.list-table .list-table-header a, .list-unit .list-status-title .stats a {
	color: rgba(255,255,255,0.8) !important;
	font-size: 22px !important;
	padding: 15px 50px 20px;
	margin: 0px 10px;
	text-shadow: 0px 3px 3px #000;
	border: 2px solid rgba(0,0,0,0);
	box-shadow: 0px 5px 10px rgba(0,0,0,0);
	transition: all 0.15s !important;
}

.list-table .list-table-header a:hover, .list-unit .list-status-title .stats a:hover {
	color: rgba(255,255,255,1) !important;
	border: 2px solid #FFF !important;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
}

.list-table .list-table-header .header-title .sort-icon {
    color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    left: -2px;
    top: -2px;
    border: 2px solid #FFF;
    text-shadow: none;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
	transition: all 0.15s;
}

.list-table .list-table-header a:hover .sort-icon {
	box-shadow: 0px 5px 10px rgba(0,0,0,0);
}

.list-unit .list-stats {
    background-color: #000;
    width: 100%;
    height: 32px !important;
    line-height: 32px;
    color: #FFF;
	font-size: 11px;
    text-align: center;
    border-top: 1px solid #FFF;
    position: absolute;
    left: 0px;
    margin-top: 0px;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
	z-index: 9998;
	overflow: visible !important;
	opacity: 0;
}

.list-unit .list-stats[style^="display: block;"] {
	-webkit-animation: fade-in 0.15s forwards ease-in;
	-moz-animation: fade-in 0.15s forwards ease-in;
	animation: fade-in 0.15s forwards ease-in;	
}

.status-menu-container.fixed + .list-block .list-unit .list-stats {
	position: fixed;
	top: 58px;
}

.list-unit .list-stats::after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background-color: #000;
	position: relative;
	bottom: 37px;
	left: 50%;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

#fancybox-wrap {
	position: fixed !important;
	top: 80px !important;
}

#fancybox-overlay {
	background-color: #000 !important;
	z-index: 9998;
}

#fancybox-overlay[style^="display: block;"] {
	-webkit-animation: grow-in 0.25s ease-in forwards;
	-moz-animation: grow-in 0.25s ease-in forwards;
	animation: grow-in 0.25s ease-in forwards;	
}

#advanced-options {
	position: fixed;
	top: 80px;
	background-color: rgba(0,0,0,0.8);
	border: 1px solid #FFF;
	color: #FFF;
	opacity: 0;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.4);
	z-index: 9999;
}

#advanced-options[style^="display: block;"] {
	-webkit-animation: fade-in 0.2s ease-in 0.25s forwards;
	-moz-animation: fade-in 0.2s ease-in 0.25s forwards;
	animation: fade-in 0.2s ease-in 0.25s forwards;
}

#advanced-options .advanced-options-header .description {
	float: right;
}

#advanced-options input, #advanced-options select {
	font-size: 11px;
	height: 32px;
}

#advanced-options input[type="text"] {
	padding: 0px 4px;
}

#advanced-options .sort-widget input[type="radio"] + label {
	border-radius: 0px;
	position: relative;
	top: 1px;
	height: 20px;
	border: 1px solid #CCC;
}

#advanced-options .sort-widget input[type="radio"]:checked + label {
	background-color: #000;
	border: 1px solid #FFF;
}

#advanced-options .btn-apply, #advanced-options .btn-clear {
	background-color: #FFF;
	border: 1px solid #CCC;
	border-radius: 0px;
	color: #9B9B9B;
	transition: all 0.15s;
}

#advanced-options .btn-apply:hover, #advanced-options .btn-clear:hover {
	background-color: #000;
	border: 1px solid #FFF;
	color: #FFF;
}

#advanced-options select:hover {
	cursor: pointer;
}

#advanced-options select:disabled:hover {
	cursor: no-drop;
}

#fancybox-close {
	border-bottom: 0px solid transparent !important;
}

#advanced-options #fancybox-close {
	top: 0px !important;
	right: 0px !important;
	background: none !important;
	border-bottom: 0px solid transparent !important;
}

#advanced-options #fancybox-close::before {
	content: "";
	display: block;
	width: 4px;
	height: 24px;
	background-color: #CCC;
	border-radius: 2px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 4px;
	right: 14px;
	transition: background-color 0.15s ease-in-out;
}

#advanced-options #fancybox-close::after {
	content: "";
	display: block;
	width: 4px;
	height: 24px;
	background-color: #CCC;
	border-radius: 2px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position: absolute;
	top: 4px;
	right: 14px;
	transition: background-color 0.15s ease-in-out;
}

#advanced-options #fancybox-close:hover::before, #advanced-options #fancybox-close:hover::after {
	background-color: #FFF;
}


/*
LIST CARDS
*/

.list-item, .list-item .list-table-data, .list-item .list-table-data .data.image, .list-item .list-table-data .data.image .image {
	width: 146px;
	height: 206px;
	border: none;
}

.list-table .list-table-data .data.number, .list-table .list-table-data .data.status, .list-table .list-table-data .data.image ~ td {
	position: absolute;
}

.list-table .list-table-data .data.image a {
	width: 100% !important; 
	height: 100% !important; 
	background-size: 100% 100% !important; 
	background-position: center center !important;	
	border-bottom: 0px solid transparent !important;
}

.list-table > tbody:nth-of-type(2n+1) {
	background-color: transparent;
}

.list-item {
	margin: 10px;
	position: relative;
	float: left;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	-o-perspective: 600px;
	-ms-perspective: 600px;
	perspective: 600px;
	z-index: 1;
	transition: all 0.4s ease-in-out;
}

.list-item:hover {
	z-index: 100;
}

.list-item .list-table-data {
	display: block;
	-webkit-transform: rotateY(180deg) rotateX(0deg);
	-moz-transform: rotateY(180deg) rotateX(0deg);
	-o-transform: rotateY(180deg) rotateX(0deg);
	-ms-transform: rotateY(180deg) rotateX(0deg);
	transform: rotateY(180deg) rotateX(0deg);
	background-color: transparent;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.4);
	transition: transform 0.4s ease-in-out, background-color 0.2s 0.1s ease-in-out;	
}

.list-item:hover .list-table-data {
	-webkit-transform: rotateY(0deg) rotateX(0deg) scale(1.25);
	-moz-transform: rotateY(0deg) rotateX(0deg) scale(1.25);
	-o-transform: rotateY(0deg) rotateX(0deg) scale(1.25);
	-ms-transform: rotateY(0deg) rotateX(0deg) scale(1.25);
	transform: rotateY(0deg) rotateX(0deg) scale(1.75);
	background-color: #FFF;
}

.list-table .list-table-data .data {
	padding: 0px;
}

.list-item .data {
	opacity: 0;
	transition: opacity 0.4s 0.2s;
}

.list-item:hover .data {
	opacity: 1;
}

.list-item .data.image {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	opacity: 1;
}

.list-item:hover .data.image {
	opacity: 0.2;
}

.list-item .data.status {
	left: 0px;
	top: 0px;
	background-color: transparent !important;
}

.list-item .data.status.watching::after {
	content: "Watching...";
	display: block;
	font-size: 11px;
	color: #000;
	position: absolute;
	top: 162px;
	left: 0px;
	border-left: 5px solid green;
	padding-left: 11px;
	white-space: nowrap;
}

.list-item .data.status.reading::after {
	content: "Reading...";
	display: block;
	font-size: 11px;
	color: #000;
	position: absolute;
	top: 162px;
	left: 0px;
	border-left: 5px solid #2db039;
	padding-left: 11px;
	white-space: nowrap;
}

.list-item .data.status.completed::after {
	content: "Completed!";
	display: block;
	font-size: 11px;
	color: #000;
	position: absolute;
	top: 162px;
	left: 0px;
	border-left: 5px solid #26448f;
	padding-left: 11px;
	white-space: nowrap;	
}

.list-item .data.status.onhold::after {
	content: "On hold...";
	display: block;
	font-size: 11px;
	color: #000;
	position: absolute;
	top: 162px;
	left: 0px;
	border-left: 5px solid #f1c83e;
	padding-left: 11px;
	white-space: nowrap;
}

.list-item .data.status.dropped::after {
	content: "Dropped.";
	display: block;
	font-size: 11px;
	color: #000;
	position: absolute;
	top: 162px;
	left: 0px;
	border-left: 5px solid red;
	padding-left: 11px;
	white-space: nowrap;
}

.list-item .data.status.plantowatch::after, .list-item .data.status.plantoread::after {
	content: "Planning to!";
	display: block;
	font-size: 10px;
	color: #000;
	position: absolute;
	top: 162px;
	left: 0px;
	border-left: 5px solid #c3c3c3;
	padding-left: 11px;
	white-space: nowrap;
}

.list-item .data.number {
	border-bottom: 0px solid transparent;
	left: 0px;
	bottom: 0px;
	font-size: 8px;
	font-weight: bold;
	padding: 4px 6px;
}

.list-item .data.title {
	left: 1px;
	top: 0px;
	width: 90%;
	padding: 6px !important;
	border-bottom: 0px solid transparent;
}

.list-item .data.title::after {
	content: "";
	display: block;
	width: 90%;
	height: 1px;
	border-bottom: 1px solid #999;
	position: relative;
	top: 6px;
	left: 5px;
}

.list-item .data.title a {
	color: rgba(0,0,0,0.5);
	border-bottom: 0px solid transparent !important;
}

.list-item .data.title a:hover {
	color: rgba(0,0,0,1);
}

.list-table .list-table-data .data.title .link {
	font-size: 11px;
}

/*
this is where the airing block is
*/
.list-item .data.title .content-status, .list-item .data.title .rewatching, .list-item .data.title .rereading {
	position: absolute;
	bottom: 0px;
	left: 48px;
	top: 185px;
	min-width: 28px;
	height: 15px;
	color: #000 !important;
	padding: 1px 8px 3px 8px;
	background-color: green;
	border-bottom: 1px solid cyan;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

body.manga .list-item .data.title .content-status {
	left: 34px;
}

.list-item .data.title .rewatching {
	left: 32px;
}

.list-table .list-table-data .data.title .add-edit-more {
	color: transparent;
}

.list-table .list-table-data .data.title .add-edit-more .add {
	position: absolute;
	top: 182.5px;
	right: 0px;
	padding: 5px;
}

.list-table .list-table-data .data.title .add-edit-more .edit {
	position: absolute;
	top: 182.5px;
	right: 0px;
	padding: 5px;
}

.list-table .list-table-data .data.title .add-edit-more .edit a {
	font-size: 9px;
	font-weight: bold;
}

.list-table .list-table-data .data.title .add-edit-more .more {
	top: 5px;
	left: -10px;
	padding: 2px;
	width: 60px;
}

.list-table .list-table-data .data.title .add-edit-more .more a {
	color: transparent !important;
	white-space: nowrap;
	font-size: 8px;
	padding: 2px 0px;
}

.list-table .list-table-data .data.title .add-edit-more .more a::after {
	content: "show/hide details";
	font-size: 9px;
	font-weight: bold;
	pointer-events: none;
	color: rgba(0,0,0,0.7);
	position: relative;
	right: 6px;
	bottom: 1px;
	white-space: nowrap;
	transition: color 0.15s ease-in-out;
}

.list-table .list-table-data .data.title .add-edit-more .more a:hover::after {
	color: rgba(0,0,0,1);
	border-bottom: 1px solid black;
}

.list-item .more-info {
	position: absolute;
	top: 69px;
	left: -32px;
	width: 210px;
	height: 100px;
	overflow-x: hidden;
	overflow-y: scroll;
	border-bottom: 0px solid transparent;
	background-color: transparent;
	opacity: 0;
	-webkit-transform: rotateY(180deg) scale(0.75);
	-moz-transform: rotateY(180deg) scale(0.75);
	-o-transform: rotateY(180deg) scale(0.75);
	-ms-transform: rotateY(180deg) scale(0.75);
	transform: rotateY(180deg) scale(0.75);	
	transition: all 0.4s ease-in-out;
}

.list-item .more-info[style="display: block;"], .list-item .more-info[style="display: table-row;"] {
	-webkit-animation: expand 0.15s forwards ease-in;
	-moz-animation: expand 0.15s forwards ease-in;
	animation: expand 0.15s forwards ease-in;
}

.list-item:hover .more-info {
	top: 5px;
	background-color: #EEE;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	opacity: 1;
}

.list-item .more-info a {
	color: rgba(0,0,0,0.5);
	font-weight: bold;
	border-bottom: 0px solid transparent !important;
}

.list-item .more-info a:hover {
	color: rgba(0,0,0,1);
}

.list-item .more-info td {
	line-height: 15px;
}

.list-item .data.score {
	top: 100px;
	left: 14px;
	color: #FFF;
	font-size: 11px;
	background-color: #000;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	border-bottom: 0px solid transparent;
	z-index: 2;
}

.list-item .data.score a {
	color: #FFF !important;
	font-size: 13px !important;
	position: relative;
	top: 7px;
	border-bottom: 0px solid transparent !important
}

.list-item .data.score a::after {
	content: "/ 10";
	display: block;
	position: absolute;
	top: 4px;
	left: 24px;
	color: #000;
	font-size: 12px;
	font-weight: 300;
	white-space: nowrap;
}

.list-item .data.type {
	top: 162px;
	right: 15px;
	font-size: 11px;
	font-weight: bold;
	border-bottom: 0px solid transparent;
}

.list-item .data.type::before {
	content: "(";
}

.list-item .data.type::after {
	content: ")";
}

.list-item .data.progress, .list-item .data.chapter {
	top: 97px;
	right: 15px;
	width: 40px;
	height: 40px;
	background-color: #000;
	border-bottom: 0px solid transparent;
}

.list-item .data.progress span, .list-item .data.chapter span {
	color: #FFF;
	position: relative;
	top: 11px;
}

.list-item .data.progress a, .list-item .data.chapter a {
	color: #FFF !important;
	font-size: 12px;
	border-bottom: 0px solid transparent !important;
}

.list-item .data.progress span + span, .list-item .data.chapter span + span {
	color: #FFF;
	font-size: 8px;
}

.list-item .data.progress a.icon-add-episode, .list-item .data.chapter a.icon-add-chapter {
	position: absolute;
	top: 0px;
	right: 0px;
	opacity: 1;
	transition: opacity 0.15s ease-in-out;
}

.list-item .data.progress a.icon-add-episode:hover, .list-item .data.chapter a.icon-add-chapter:hover {
	opacity: 0.8;
}


/*
FOOTER
*/

footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	z-index: 9998;
}

#footer-block {
	background-color: transparent;
	background: rgba(0,0,0,0);
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,1)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);	
}

/*#copyright {
	color: #FFF;
	letter-spacing: 1px;
	text-shadow: 0px 3px 3px #000;
}

#copyright::after {
	content: "'Mirai' list style by LukeLC"
}
*/

/*
MEDIA QUERIES
*/

@media screen and (min-width: 3500px) {
	.cover-block .image-container {
		max-height: 1000px;
	}
	
	.cover-block .image-container::after {
		height: 1000px;
	}
	
	.list-table .list-table-header a, .list-unit .list-status-title .stats a {
		font-size: 32px;
	}
}

@media screen and (min-width: 2200px) and (max-width: 3499px) {
	.cover-block .image-container {
		max-height: 700px;
	}
	
	.cover-block .image-container::after {
		height: 700px;
	}
	
	.list-table .list-table-header a, .list-unit .list-status-title .stats a {
		font-size: 26px;
	}
	
	#copyright {
		font-size: 14px;
	}
}

@media screen and (max-width: 1549px) {
	.list-table .list-table-header a, .list-unit .list-status-title .stats a {
		padding: 15px 20px 20px;
	}	
}

@media screen and (max-width: 1400px) {
	.cover-block .image-container {
		max-height: 350px;
	}
	
	.cover-block .image-container::after {
		height: 350px;
	}
	
	.header .header-title {
		background-size: auto 22px;
		width: 135px;
	}	
	
	.header .header-menu.other {
		padding: 11px 4px;
	}
	
	.header .header-menu.other .btn-menu, .header .header-menu .header-info {
		font-size: 11px;
	}
	
	.status-menu-container .status-menu .status-button {
		margin: 0px 2%;
		padding: 17px 0px 18px 0px;
		font-size: 16px;
	}
	
	.list-table > tbody:not(.list-item) {
		margin: 60px 0px;
	}
	
	.list-unit .list-status-title {
		margin: 74px 0px 79px 0px;
		right: 13%;
	}
	
	.list-table .list-table-header a, .list-unit .list-status-title .stats a {
		padding: 15px 25px 20px;
		font-size: 20px !important;
	}
}

@media screen and (max-width: 1229px) {
	.header .header-title {
		background-size: auto 20px;
		width: 125px;
	}
	
	.status-menu-container .status-menu .status-button {
		margin: 0px 1.5%;
		padding: 20px 0px 19px 0px;
		font-size: 13px;
	}
	
	.header .header-menu.other {
		padding: 14px 0px;
	}
	
	.header .header-menu.other .btn-menu, .header .header-menu .header-info {
		font-size: 9px;
	}
	
	.list-unit .list-status-title {
		margin: 66px 0px;
		right: 15%;
	}
	
	.list-table .list-table-header a, .list-unit .list-status-title .stats a {
		padding: 10px 20px 12px;
		font-size: 16px !important;
	}
}

@media screen and (max-width: 1037px) {
	.list-table .list-table-header a, .list-unit .list-status-title .stats a {
		padding: 10px 15px 12px;
	}
}

@media screen and (max-width: 949px) {
	.status-menu-container .status-menu {
		width: 60%;
		padding-top: 55px;
		display: block;
		height: 0px;
		overflow-y: hidden;
		box-shadow: 0px 5px 10px rgba(0,0,0,0);
		transition: all 0.3s ease-in-out;
	}
	
	.status-menu-container .status-menu:hover, #status-menu:hover .status-menu {
		height: 343px;
		box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
	}
	
	.status-menu-container .status-menu::before {
		content: "Menu";
		color: rgba(255,255,255,0.8);
		font-size: 15px;
		font-weight: bold;
		display: block;
		position: relative;
		width: 20%;
		top: -56px;
		padding: 16px 0px;
		margin: 0px 40%;
		left: 0px;
		border-bottom: 1px solid #FFF;
		transition: width 0.3s ease-in-out, margin 0.3s ease-in-out, color 0.3s ease-in-out;
	}
	
	.status-menu-container:hover .status-menu::before {
		width: 100%;
		margin: 0px;
		cursor: pointer;
		color: rgba(255,255,255,1);
	}
	
	.status-menu-container .status-menu .status-button:first-of-type {
		margin-top: -55px;
	}
	
	.status-menu-container .status-menu .status-button {
		width: 33.4%;
		margin: 0px;
		padding: 20px 33.3%;
		background-color: rgba(0,0,0,0.8);
	}
	
	#status-menu + .list-block {
		position: relative;
		z-index: 0;
		transition: z-index 0.3s ease-out;
	}
	
	#status-menu:hover + .list-block {
		z-index: -10;
	}
	
	.list-unit .list-status-title {
		position: relative;
		margin: 50px 0px 20px;
		right: 0px;
		display: table;
		float: left;
		width: 100%;
		text-align: center;
	}
	
	.list-unit .list-status-title .stats {
		position: relative;
		display: table-cell;
	}
	
	.list-table > tbody:not(.list-item) {
		margin: 20px 0px 50px;
		width: 100%;
	}
	
	.list-table .list-table-header a, .list-unit .list-status-title .stats a {
		padding: 10px 45px 12px;
	}
}

@media screen and (max-width: 799px) {
	.list-table .list-table-header a, .list-unit .list-status-title .stats a {
		padding: 10px 25px 12px;
	}
	
	#copyright {
		font-size: 10px;
	}
}


/*
CHROME FIXES
*/

@supports (-webkit-appearance:none) {
	@media screen and (max-width: 949px) {
		.status-menu-container .status-menu:hover, #status-menu:hover .status-menu {
			height: 336px;
		}
	}
}


/*
IE FIXES (EDGE) - Really, Microsoft??
*/

@supports (-ms-accelerator:true) {	
	.list-item .list-table-data {
		-ms-transform: rotateY(180deg) rotateX(0deg);
		transform: rotateY(180deg) rotateX(0deg);
	}
	
	.list-item:hover .list-table-data {
		-ms-transform: rotateY(0deg) rotateX(0deg);
		transform: rotateY(0deg) rotateX(0deg);
	}	
	
	.list-item .more-info {
		background-color: transparent !important;
		position: relative;
	}	
	
	.list-item .more-info .more-content {
		display: block;
		position: relative;
		top: -122px;
		height: 50px;
		overflow-x: hidden;
		overflow-y: scroll;
		background-color: #EEE;		
		opacity: 0;
		transition: opacity 0.25s 0s ease-out;
	}
	
	.list-item:hover .more-info .more-content {
		opacity: 1;
		transition: opacity 0.25s 0.25s ease-in;
	}
	
	.list-item .more-info .more-content > table {
		height: 90px;
	}

	@media screen and (max-width: 949px) {
		.status-menu-container .status-menu:hover, #status-menu:hover .status-menu {
			height: 338px;
		}
	}	
}


/*
IE FIXES (<=IE11)
*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
	.list-item .list-table-data {
		-ms-transform: rotateY(180deg) rotateX(0deg);
		transform: rotateY(180deg) rotateX(0deg);
	}
	
	.list-item:hover .list-table-data {
		-ms-transform: rotateY(0deg) rotateX(0deg);
		transform: rotateY(0deg) rotateX(0deg);
	}	
	
	.list-item .more-info {
		background-color: transparent !important;
		position: relative;
	}	
	
	.list-item .more-info .more-content {
		display: block;
		position: relative;
		top: -122px;
		height: 50px;
		overflow-x: hidden;
		overflow-y: scroll;
		background-color: #EEE;		
		opacity: 0;
		transition: opacity 0.25s 0s ease-out;
	}
	
	.list-item:hover .more-info .more-content {
		opacity: 1;
		transition: opacity 0.25s 0.25s ease-in;
	}
	
	.list-item .more-info .more-content > table {
		height: 90px;
	}
	
	.status-menu-container .status-menu:hover, #status-menu:hover .status-menu {
		height: 338px;
	}	
}