/**
 *
 *  GENERAL
 *
 **/

body {
	background: #f8f8f8;
	color: #050505;
	font-family: 'Karla', sans-serif;
}

/* background color */
#home-index,
#about-index,
#contact-index,
#news-view,
.news-item,
.character-item .col-right { background: white; }

/* shade box */
.well {
	background: #efefef;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

/* link */
a {
	color: #050505;
	-webkit-transition: color .3s;
	   -moz-transition: color .3s;
	        transition: color .3s;
}
a:active,
a:focus,
a:hover { text-decoration: none; }

/* button */
.btn {
	border: none;
	border-radius: 0;
	padding: .5em 1.5em;
}
.btn-primary { background: #050505; }
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover { background: #666; }
.btn[disabled] { opacity: .3; }

/* thumbnail */
.thumbnail {
	border-radius: 0;
	border: none;
	padding: 0;
}
.thumbnail img,
.img-responsive {
	height: 100%;
	width: 100%;
}
.thumbnail .img-wrapper { overflow: hidden; }

/* thumbnail as link */
a.thumbnail {
	display: block;
	overflow: auto;
}
a.thumbnail img {
	-webkit-transition: all .3s;
	   -moz-transition: all .3s;
	        transition: all .3s;
}
a.thumbnail:active img,
a.thumbnail:focus img,
a.thumbnail:hover img {
	-webkit-transform: scale(1.05, 1.05);
	   -moz-transform: scale(1.05, 1.05);
	        transform: scale(1.05, 1.05);
}

/* heading */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-weight: 700;
	margin-bottom: 1.2em;
}

h1, .h1 { font-size: 1.8em; }
h2, .h2 { font-size: 1.5em; }
h3, .h3 { font-size: 1.375em; }
h4, .h4 { font-size: 1.25em; }
h5, .h5 { font-size: 1.125em; }
h6, .h6 { font-size: 1em; }

/* others */
p { margin-bottom: 1.6em; }

.no-padding { padding: 0; }

.form-control {
	border-color: #ccc;
	border-radius: 0;
	box-shadow: none;
}




/**
 *
 *  HEADER & NAVIGATION
 *
 **/

#header .navbar-brand {
	font-weight: bold;
	padding: 0;
	margin-bottom: 1em;
	margin-top: 6em;
	letter-spacing: -1px;
	font-size: 1.5em;
}

#nav ul.nav {
	border-color: #c5c5c5;
	border-style: solid;
	border-width: 1px 0;
	padding: 2em 0;
	width: 100%;
	-webkit-transition: all .5s;
	   -moz-transition: all .5s;
	        transition: all .5s;
}
#nav ul.nav li { float: none; }
#nav ul.nav li a {
	background: none;
	color: #aaa;
	font-weight: 700;
	padding: .2em;
}
#nav ul.nav li.active a,
#nav ul.nav li a:active,
#nav ul.nav li a:focus,
#nav ul.nav li a:hover { color: #050505; }

/* sticky header */
#global-right.affix { position: relative; }
#global-right.affix > :first-child {
	position: fixed;
	top: 15px;     /* should match [data-offset] in javascript */
	width: 248px;  /* hard-coded */
}
#global-right.affix #header .navbar-brand { margin-top: 0; }
#global-right.affix #nav ul.nav {
	margin-bottom: -2em;
	margin-top: -2.5em;
}

/* stick sidebar */
#global-left #tab-layout.affix { position: relative; }
#global-left #tab-layout.affix ul.nav {
	position: fixed;
	top: 7px;      /* should match [data-offset] in javascript */
	width: 128px;  /* hard-coded */
}
#global-left #tab-layout.affix .tab-content { margin-left: 128px; }




/**
 *
 *  FOOTER
 *
 **/

#footer,
#footer-mobile {
	letter-spacing: 1px;
	font-size: .96em;
	line-height: 1.1em;
}




/**
 *
 *  CONTENT
 *
 **/

#tab-layout ul.nav li a {
	background: none;
	color: #aaa;
	padding: .25em 0;
}
#tab-layout ul.nav li.active a,
#tab-layout ul.nav li a:active,
#tab-layout ul.nav li a:focus,
#tab-layout ul.nav li a:hover { color: #050505; }

#tab-layout ul.nav li.active a { font-weight: bold; }
#tab-layout ul.nav li.active a::before {
	content: "\f101";
	display: inline-block;
	font-family: 'FontAwesome';
	font-weight: normal;
	margin-right: 3px;
}
#tab-layout ul.nav li.btn-back a::before {
	content: "\f100";
	display: inline-block;
	font-family: 'FontAwesome';
	font-weight: normal;
	margin-right: 3px;
}

/* shopping */
#shopping-index .img-wrapper {
	height: 185px;
	position: relative;
}
#shopping-index .img-wrapper img {
	height: auto;
	left: 50%;
	min-width: 185px;
	min-height: 100%;
	position: absolute;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}
#shopping-index a.thumbnail:active img,
#shopping-index a.thumbnail:focus img,
#shopping-index a.thumbnail:hover img {
	-webkit-transform: scale(1.05, 1.05) translate(-47.5%, -47.5%);
	   -moz-transform: scale(1.05, 1.05) translate(-47.5%, -47.5%);
	        transform: scale(1.05, 1.05) translate(-47.5%, -47.5%);
}

/* news */
.news-item .thumbnail { margin: 0; padding: 0; }
.news-item .thumbnail .img-wrapper img { object-fit: cover; }

/* block-ui overlay */
.blockUI.blockOverlay {
	background: white !important;
	opacity: .5 !important;
}

/* back-to-top */
#back2top {
    color: white;
    background: #34495e;
    bottom: 2em;
    border-radius: 50%;
    height: 3.5em;
    line-height: 3.3em;
    opacity: 0;
    position: fixed;
    right: 2em;
    text-align: center;
    text-decoration: none;
    width: 3.5em;
    z-index: 100;
}
#back2top.affix { opacity: .8; }
#back2top.affix:hover { opacity: 1; }




/**
 *
 *  LOADING
 *
 **/
#loader {
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
}



/**
 *
 *  RESPONSIVE
 *
 **/

/* lg */
@media screen and (min-width: 1200px) {}

/* md */
@media screen and (min-width: 992px) {}

/* sm */
@media screen and (min-width: 768px) {}

/* xs */
@media screen and (max-width: 767px) {

	/* helper class */
	.row-xs { margin-left: -15px; margin-right: -15px; }
	.container-fluid-xs { padding-left: 15px; padding-right: 15px; }
	.no-padding-xs { padding: 0; }
	.pull-none-xs { float: none !important; }
	.text-left-xs { text-align: left !important; }
	.text-right-xs { text-align: right !important; }
	.text-center-xs { text-align: center !important; }
	/* header */
	#header { background: white; border-bottom: solid 1px #c5c5c5; min-height: 56px; padding: 0; position: fixed; top: 0; width: 100%; }
	#header .navbar-brand { height: 100%; margin-bottom: 0; margin-top: 0; padding: .8em 1em; }
	#header .navbar-toggle { background: #050505; border-radius: 0; color: white; line-height: 1em; margin-right: .8em; margin-top: 11px; }
	#header .navbar-toggle.collapsed { color: #050505; background: white; }
	/* navigation */
	#nav { padding: 0; width: 100%; }
	#nav ul.nav { border-bottom: 0; margin: 0; padding: 0; width: 100%; }
	#nav ul.nav > li { padding: 0; }
	#nav ul.nav > li > a { padding: 1em; }
	#nav ul.nav li.active a,
	#nav ul.nav li a:active,
	#nav ul.nav li a:focus,
	#nav ul.nav li a:hover { background: #f8f8f8; color: #050505; }
	/* sticky header */
	#global-right.affix { position: static; }
	#global-right.affix > :first-child { position: static; width: auto; }
	#global-right.affix #header .navbar-brand { margin-top: auto; }
	#global-right.affix #nav ul.nav { margin-bottom: auto; margin-top: auto; }
	/* stick sidebar */
	#global-left #tab-layout.affix { position: static; }
	#global-left #tab-layout.affix ul.nav { position: static; width: auto; }
	#global-left #tab-layout.affix .tab-content { margin-left: 0; }
	/* content */
	#content { margin-top: 72px; }
	#shopping-index .img-wrapper { height: auto; }
	#shopping-index .img-wrapper img { min-width: 1px; position: static; }
	#shopping-index .img-wrapper img {
		-webkit-transform: none;
		   -moz-transform: none;
		        transform: none;
	}
	#shopping-index a.thumbnail:active img,
	#shopping-index a.thumbnail:focus img,
	#shopping-index a.thumbnail:hover img {
		-webkit-transform: scale(1.05, 1.05);
		   -moz-transform: scale(1.05, 1.05);
		        transform: scale(1.05, 1.05);
	}
	/* content : tab */
	#tab-layout ul.nav { overflow-x: scroll; padding: 0 1em .5em 1em; white-space: nowrap; width: 100%; }
	#tab-layout ul.nav li { display: inline-block; margin: 0 .5em 0 0; }
	#tab-layout ul.nav li a { background: #c5c5c5; border-radius: 1em; color: white; padding: .25em 1em; }
	#tab-layout ul.nav li.active a,
	#tab-layout ul.nav li a:active,
	#tab-layout ul.nav li a:focus,
	#tab-layout ul.nav li a:hover { background: #050505; color: white; }
	#tab-layout ul.nav li.active a { font-weight: normal; }
	#tab-layout ul.nav li.active:not(.btn-back) a::before { display: none; }
	#tab-layout .tab-content { width: 100%; overflow: hidden; }

}