@charset "UTF-8";
/*! Christophe Lavender based on HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
@import 'https://fonts.googleapis.com/css?family=Allura|Amatic+SC|Josefin+Slab|Pacifico|Architects+Daughter|Roboto|Source+Code+Pro|Press+Start+2P|Material+Icons';

/* ==========================================================================
   Inits
   ========================================================================== */

* {
	box-sizing: border-box;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ========================
    IE Fixes
   ======================== */

.ie7 .title {
	padding-top: 20px;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {

}

@media only screen and (min-width: 768px) {

	/* ====================
		WIDE: CSS3 Effects
	   ==================== */
	/* .header-container,
	 .main aside {
		 -webkit-box-shadow: 0 5px 10px #aaa;
			-moz-box-shadow: 0 5px 10px #aaa;
				 box-shadow: 0 5px 10px #aaa;
	 } */
	/* ============
		WIDE: Menu
	   ============ */
	.title {
		float: left;
	}

	/* ============
		WIDE: Main
	   ============ */
	.main article {
		float:       left;
		width:       100%;
	}

	.main aside {
		float: right;
		width: 0;
	}
}

/* ==========================================================================
   Main Blocks
   ========================================================================== */

body {
	font:        16px/1.4 'Roboto', monospace, arial, helvetica, clean, sans-serif, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-family: 'Roboto', monospace, arial, helvetica, clean, sans-serif, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size:   1em;
}

.hidden {
	display: none !important;
}

.sticky {
	position: fixed;
	z-index:  10;
	width:    100%;
}

.wrapper {
	width:  99%;
	margin: 0 auto;
}

.header-container {
	position: relative;
	display: inline-block;
	width:    100%;
}

header .title {
	display:         inline-block;
	position: relative;
	float: left;
	font-family: 'Source Code Pro', 'Press Start 2P', 'Roboto', monospace, arial, helvetica, clean, sans-serif, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size:   2em;
	line-height: 2em;
	font-weight: 800;
	padding:         0;
	margin:          0;
	height:          auto;
	width:           auto;
	align-content:   center;
	vertical-align:  middle;
	text-decoration: none;
	letter-spacing: -1px;
}

header .titleIcon {
	vertical-align: middle;
	font-size:   1.5em;
}

header .holderTitleLoader {
	display: none;
}

.logoIcon {
	font-size: 1.5em;
	vertical-align: middle;
}

.holderTitleLoader {
	display: none;
}

.main-container {
	position: relative;
	display: inline-block;
	width:    100%;
	top: -5px;
	z-index: 1;
}

.main {
	position: relative;
	display:  inline-block;
	padding:  0 0 0.2em;
}

.main .mainArticle {
	position: relative;
	display: inline-block;
	width: 100%;
	vertical-align: middle;
}

footer .footerHolder {
	display: inline-block;
	width: auto;
	float: right;
	vertical-align: bottom;
	font-family: 'Press Start 2P', 'Roboto', monospace, arial, helvetica, clean, sans-serif, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size:   0.6em;
	line-height: 0.6em;
}

footer .footer-container {
	position: relative;
	display: inline-block;
	width:    100%;
	border-top: 0.2em transparent;
	background: transparent;
}

.infoPanel {
	position:  fixed;
	bottom:    0;
	right:     10px;
	font-size: 0.8em;
	z-index: -10;
}

/* ==========================================================================
sticky layout
========================================================================== */
.is_stuck {
	/*margin-top: 0.5em;*/
	display:  inline-block;
	position: relative;
	float:    left;
	z-index: 2;
	transition:         all 0.3s ease 0s;
}

/* ==========================================================================
   Drag & Drop Grid
   ========================================================================== */
.grid {
	display: inline-block;
	position: relative;
	width: 100%;
	transition: opacity 0.4s ease-in-out;
}

.grid .gridItem {
	display: inline-block;
	position: relative;
	width: 23%;
	padding: 0.5em;
	margin: 0.2em;
	border: 1px solid transparent;
	transition: opacity 0.4s ease-in-out;
}

.grid > span {
	background-color: rgba(0, 0, 0, 0.2);
	transition: opacity 0.4s ease-in-out;
}
.grid > span {
	cursor: move;
	cursor: grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
}

/* ==========================================================================
   Collapsible panel
   ========================================================================== */

.sideContainer {
	display: inline-block;
	height: 60%;
	width: 0;
	position: fixed;
	z-index: 9;
	top: 0;
	right: 0;
	background-color: #111;
	overflow-x: hidden;
	border-bottom-left-radius: 25px;
	border-top-left-radius: 25px;
	margin-top: 5em;
	margin-bottom: 5em;
	transition: 0.5s;
}

.sideContainer a {
	display: inline-block;
	position: relative;
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	transition: 0.3s !important;
	width:  100%;
}

.sideContainer .closeBtn {
	display: inline-block;
	position: relative;
	top: 10px;
	left: 10px;
	font-size: 2.0em;
	transform: scale(1.50) rotate(45deg);
	margin-bottom: 20px;
	cursor: pointer;
}

.openBtnHolder {
	display: inline-block;
	position:    fixed;
	bottom:      50px;
	right:       0;
	z-index:     10;
	border:      0;
	padding:     0.5em;
	line-height:   2.0em;
	margin:      0.1em 0 0.1em 0.1em;
	border-bottom-left-radius: 25px;
	border-top-left-radius: 25px;
}

.openBtn {
	display: inline-block;
	position: relative;
	transition:  0.5s ease !important;
	font-size:   2.0em;
	line-height: 2.0em;
	cursor: pointer;
}

.openBtn:hover {

}

.refreshBtn {
	display: inline-block;
	position: relative;
	float: left;
	transition:  0.5s ease !important;
	font-size:   2.0rem;
	line-height: 2.0em;
	cursor: pointer;
	width: 3rem;
}

.refreshBtn:hover {
	transform: rotate(45deg);
}

.tknImage {
	display: inline-block;
	position: relative;
	float: left;
	transition:  0.5s ease !important;
	font-size:   2.0em;
	line-height: 2.0em;
	border-radius: 5px;
	width: 88%;
}

/* ==========================================================================
   Color Scheme
   ========================================================================== */

html {
	color: #fafafa;
}

body {
	background: #212121;
}

body::-webkit-scrollbar-track {
	background-color: #262524;
}

body::-webkit-scrollbar {
	background-color: #262524;
}

body::-webkit-scrollbar-thumb {
	background-color: #f5f5f5;
}

hr {
	border-top: 1px solid #ccc;
}

.header-container, .footer-container, .main aside {
	background: #1c313a;
	border-bottom: 0.2em solid #102027;
}

header .title {
	color: #62727b;
}

.logoIcon {
	color: #37474f;
}

.title {
	color: #fafafa;
}

.main aside {
	color: #fafafa;
}

.footer-container footer {
	color: #62727b;
}

.infoPanel {
	color: #65636c;
}

.grid {

}

.grid .gridItem {
	background: #62727b;
	color: #eeeeee;
}

.grid .item .item-content {

}

.sideContainer {
	background: #37474f;
}

.sideContainer a {
	color: #78909c;
}

.sideContainer a:hover {
	color: #eeeeee;
}

.openBtnHolder {
	background: #37474f;
}

.openBtn {
	color: #78909c;
}

.openBtn:hover {
	color: #4fb3bf;
}

.refreshBtn {
	color: #78909c;
}

.previewBtn {
	background: #62727b;
	color: #eeeeee;
}

.previewBtn:hover {
	background: #718792;
	color: #4fb3bf;
}

.sortBtn {
	background: #62727b;
	color: #eeeeee;
}

.sortBtn:hover {
	background: #718792;
	color: #4fb3bf;
}

/* ==========================================================================
   Template Colors
   ========================================================================== */

.primary {
	background: #37474f;
}

.primaryLight {
	background: #62727b;
}

.primaryDark {
	background: #102027;
}

.secondary {
	background: #455a64;
}

.secondaryLight {
	background: #718792;
}

.secondaryDark {
	background: #1c313a;
}

.primaryText {
	color: #ffffff;
}

.primaryTextDark {
	color: #eeeeee;
}

.secondaryText {
	color: #78909c;
}

.highLightText {
	color: #4fb3bf;
}

.primaryBackground {
	background: #212121;
}

.green {
	background: #27ae60;
}

.red {
	background: #c0392b;
}

/* ==========================================================================
   Materialize Color Override
   ========================================================================== */
.input-field input[type=text] {
	color: #eeeeee !important;
}
.input-field label {
	color: #78909c !important;
}

.input-field .prefix {
	color: #78909c !important;
}

.input-field input[type=text] {
	border-bottom: 1px solid #78909c !important;
	box-shadow: 0 1px 0 0 #78909c !important;
}

.input-field input[type=text]:focus + label {
	color: #4fb3bf !important;
}

.input-field .prefix.active {
	color: #4fb3bf !important;
}

.input-field input[type=text]:focus {
	border-bottom: 1px solid #4fb3bf !important;
	box-shadow: 0 1px 0 0 #4fb3bf !important;
}