/**
 * @author Thomas S. Butler
 * @abstract This is CSS (style sheet) for the application.
 * @copyright 2018-2019 Thomas S. Butler
 */

/* Import app CSS */
@import url("app.css");

/* CSS Overrides */

body {
  background: linear-gradient(#1ad6fd, #1d62f0);
}

p {
  font-family: 'source-sans-pro-regular';
  font-size: 1.4em;
}

h2 {
  font-family: 'bebas-neue-regular';
  font-size: 60px;
  margin-bottom: 8px;
}

body.loading .navigation,
body.loading .pages {
  visibility: hidden;
}

.pages {
  position: relative;
  background: transparent;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0%;
}

.pages,
.header {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: transform 700ms cubic-bezier(0.91, 0.01, 0.6, 0.99);
  -moz-transition: transform 700ms cubic-bezier(0.91, 0.01, 0.6, 0.99);
  -ms-transition: transform 700ms cubic-bezier(0.91, 0.01, 0.6, 0.99);
  -o-transition: transform 700ms cubic-bezier(0.91, 0.01, 0.6, 0.99);
  transition: transform 700ms cubic-bezier(0.91, 0.01, 0.6, 0.99);
}

.page,
.section {
  display: none;
}

.page.fill {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.page.active,
.page.show,
.section.active,
.section.show {
  display: block;
}

.page-content.fullscreen,
.page-content.fullscreen .content {
  width: 100vw !important;
  height: 100vh !important;
  padding: 0px !important;
  margin: 0 auto !important;
  padding-bottom: 0px !important;
}

.pages .sections {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0px;
  text-align: center;
}

.pages .section {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: auto;
  margin: 0 auto;
  padding: 80px;
  text-align: center;
}

.pages .section.full,
.pages .section.footer {
  width: 100%;
  max-width: 100%;
  padding: 0px;
}

/* Page and Footer Stack */

.page {
  background: transparent;
  background-color: transparent;
}

.pages.wrap {
	position: relative;
	z-index: 100;
  background: transparent;
  background-color: transparent;
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

.footer {
  position: relative;
  display: none;
	height: 400px;
	color: #CCCCCC;
	font-size: 12px;
	background-color:#31353a;
	background-image:-webkit-linear-gradient(top, #31353a, #2f3337);
	background-image:-moz-linear-gradient(top, #31353a, #2f3337);
	background-image:linear-gradient(top, #31353a, #2f3337);
  z-index: 999;
}

.footer .footer-inner {
  position: fixed;
  display: block;
	width: 100%;
  background: transparent;
  bottom: 80px;
  visibility: hidden;
  opacity: 0;
  z-index: -2;
}

.footer .footer-content {
  position: relative;
	width: 100%;
  max-width: 1352px;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 60px;
  background: #FFFEEE;
	z-index: -3;
}

.footer .copyright {
  position: fixed;
}

body.showfoot .footer {
  display: block;
}

/* Custom Logo Header */

.main-content .logo-container {
  width: auto;
  margin: 0 auto;
  text-align: center;
  margin-left: -80px;
}

.main-content .logo-container img,
.main-content .logo-container h1 {
  display: inline-block;
}

.main-content .logo-container h1 {
  margin-left: 90px;
}

.main-content .logo-container .logo {
  width: 100%;
  max-width: 60px;
  opacity: 1;
}

/* Page Content Overrides */

.page-content h1,
.page-content p {
  color: #FFFFFF;
}

.page-content p {
  font-size: 1.25em;
  margin-top: 48px;
}

.page-content .sub-content,
.page-content .sub-content p {
  color: #404040;
}

/* Curtain Backdrop */

.curtain .page {
  display: none;
  position: relative;
  width: 100%;
  min-height: 520px;
  margin: 0px;
  padding: 0px;
  z-index: 0;
  background: #7704c4;
  background-color: #7704c4;
  background-image: linear-gradient(141deg, #7904c7 0%, #7e06d7 51%, #7704c4 75%);
}

.page-content {
  margin-top: 0px;
  max-width: 1352px;
}

body.curtain .curtain {
  display: block;
}

body.curtain .page-content {
  margin-top: -580px;
}

/* Color Options Select */

.options-block {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 18px;
  margin-top: 60px;
}

.options-block h3 {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 18px;
}

.options-block .options {
  width: 380px;
  margin: 0 auto;
  text-align: center;
}

.options-block .options .option {
  width: 60px;
  height: 60px;
  display: inline-block;
  margin: 4px;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0px 1px 3px rgba(2,2,2,0.2);
}

.options-block .options .option:focus,
.options-block.options .option:active {
  border: 1px solid rgba(0,0,0,0.45);
}

.options-block .options .option.color {
  border: 1px solid rgba(255,255,255,0.95);
}

.options-block .options.colors.primary .option.one {
  background: #00010D;
  background-color: #00010D;
}

.options-block .options.colors.primary .option.two {
  background: #024059;
  background-color: #024059;
}

.options-block .options.colors.primary .option.three {
  background: #025E73;
  background-color: #025E73;
}

.options-block .options.colors.primary .option.four {
  background: #6099A6;
  background-color: #6099A6;
}

.options-block .options.colors.primary .option.five {
  background: #EBF2F1;
  background-color: #EBF2F1;
}

.options-block .options.colors.secondary .option.one {
  background: #A6A6A6;
  background-color: #A6A6A6;
}

.options-block .options.colors.secondary .option.two {
  background: #D9D9D9;
  background-color: #D9D9D9;
}

.options-block .options.colors.secondary .option.three {
  background: #737373;
  background-color: #737373;
}

.options-block .options.colors.secondary .option.four {
  background: #0D0D0D;
  background-color: #0D0D0D;
}

.options-block .options.colors.secondary .option.five {
  background: #404040;
  background-color: #404040;
}

.options-block .options .option.desc {
  clear: both;
  display: block;
  width: 100% !important;
  height: 28px !important;
  border: none !important;
  box-shadow: none !important;
}

.options-block .options .option.desc:hover {
  text-decoration: underline;
}

.options-block input {
  opacity: 0;
  position: absolute;
  z-index: -2;
}

/* Item Editor Container */

.pages.wrap {
	transition: transform 0.6s, opacity 0.6s;
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.pages.wrap.editor {
	opacity: 0;
	transform: scale3d(0.8,0.8,1);
}

.item-editor {
	position: relative;
	text-align: center;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100vh;
}

.item-editor::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: rgba(0,0,0,0.3);
}

.item-editor .editor-inner {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50%;
  background: #f0f0f0;
}

.item-editor .editor-inner.up {
	color: #dce6e6;
	background: #00010D;
}

.item-editor .editor-inner.down {
	top: 50%;
	color: #DCE6E6;
	background: #025E73;
}

.item-editor.edit .editor-inner.up {
	height: 25%;
}

.item-editor.edit .editor-inner.down {
  height: 75%;
  top: 25%;
}

.item-editor .closeme {
  font-size: 40px;
  position: absolute;
  z-index: 100;
  top: 40px;
  right: 60px;
  cursor: pointer;
  display: none;
}

.item-editor .closeme:hover {
  color: #D9D9D9;
}

.item-editor.open .closeme {
	display: block;
}

.item-editor .editor-form {
	width: 75%;
	max-width: 900px;
	margin: 0 auto;
}

.item-editor .editor-input {
  font-family: inherit;
  font-size: 65px;
  line-height: 1;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 0.1em 0;
  color: inherit;
  border: 0px;
  border-bottom: 4px solid #404040;
  background: transparent;
  background-color: transparent;
  outline: none;
}

.item-editor .editor-input:focus {
  border-bottom: 4px solid #025E73;
}

.item-editor .editor-input.invalid {
  border-bottom: 4px solid #AE0014;
}

.item-editor .editor-input::-webkit-input-placeholder,
.item-editor .editor-input::-moz-placeholder,
.item-editor .editor-input:-ms-input-placeholder {
	opacity: 0.1;
	color: #FFFFFF;
}

.item-editor .editor-input::-webkit-search-cancel-button,
.item-editor .editor-input::-webkit-search-decoration {
	-webkit-appearance: none;
}

.item-editor .editor-info {
	font-size: 90%;
	font-weight: bold;
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 0.85em 0;
	text-align: right;
}

.item-editor .editor-data {
	display: flex;
	width: 75%;
	max-width: 900px;
	pointer-events: none;
}

.item-editor {
	pointer-events: none;
}

.item-editor.open {
	pointer-events: auto;
}

.item-editor::before {
	opacity: 0;
	transition: opacity 0.6s;
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.item-editor.open::before {
	opacity: 1;
}

.item-editor .closeme {
	opacity: 0;
  font-family: 'fontello';
	transform: scale3d(0.8, 0.8, 1);
	transition: opacity 0.6s, transform 0.6s;
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.item-editor.open .closeme {
	opacity: 1;
	transform: scale3d(1, 1, 1);
}

.item-editor .editor-inner {
	transition: transform 0.6s;
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.item-editor .editor-inner.up {
	transform: translate3d(0,-100%,0);
}

.item-editor .editor-inner.down {
	transform: translate3d(0,100%,0);
}

.item-editor.open .editor-inner {
	transform: translate3d(0,0,0);
}

.item-editor.edit .editor-inner.up {
	-webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.item-editor.edit .editor-inner.down {
	-webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

@media screen and (max-width: 40em) {
	.item-editor .closeme {
		font-size: 1.25em;
	}
}

/* CodeMirror Overrides */

.CodeMirror {
  width: 100%;
  height: 300px;
  border: 1px solid #ddd;
  pointer-events: all;
  text-align: left;
}

.CodeMirror-scroll {
  width: 100%;
  max-height: 300px;
  pointer-events: all;
  text-align: left;
}

.CodeMirror pre {
  padding-left: 7px;
  line-height: 1.25;
  pointer-events: all;
  text-align: left;
}

.CodeMirror,
.console-logs .console-line,
.console-command-line-input,
.console-message,
.CodeMirror-hint {
  font-family: Monaco, MonoSpace;
}

.CodeMirror,
.console-logs .console-line,
.console-command-line-input,
.console-message,
.CodeMirror-hint {
  font-size: 14px;
}

/* Responsive Conditionals */

@media screen and (max-width: 480px) {
  .page-content {
    padding-left: 8px !important;
    padding-right: 24px !important;
  }
}