html,
body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	text-indent:0;
}
canvas {
	display:block;
	position:absolute;
	top:0;left:0;bottom:0;right:0;
	width:100%;height:100%;
}
a, a:visited, a:active, a:hover {text-decoration:none; color: inherit}

body {	
	font-size: 1.2rem;
	line-height: auto;
	font-weight: 400;
	--font-family: "Quicksand", Helvetica, Arial, sans-serif;
	font-family: "Questrial", Helvetica, Arial, sans-serif;
	color: #222; 
}

/* -------- Grid -------- */
.hidden { display:none; }
.bold {
	font-weight:bold;
}
p {
	font-size:1.4rem;
	line-height:2.0rem;
	margin:0;
}
p img {
	max-width: 100%;
}
.container{
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;	
	box-sizing: border-box; 
	padding: 0 20px;
}

.column,
.columns {
	width: 100%;
	float: left;
	box-sizing: border-box; 
}


/* -------- Typography -------- */
#heroline { 
	margin:0 auto; 
	margin-top:3.7vw;
	max-width:80%; 
	background:rgba(255,255,255,0.3); 
	opacity:100%;
}

#herotext{
	bottom:3vw;
	position:relative;
	display:inline-block;
	max-width:100%;
}

#herosub{
	margin-top:-3vw;
	padding-bottom:3vw;
	overflow:hidden;
}

#herotext .letters, 
#herotext .letter, 
#herosub .letters, 
#herosub .line { opacity:0;}

.logofont {
	font-family: "Questrial", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Questrial", Helvetica, Arial, sans-serif;
	margin-top: 3rem;
	font-weight: 300; 
}

h4,h5,h6 {
	margin-top:1rem;
}

.hero h2 { margin-top:0; }
h1 ~ h1,
h1 ~ h2, 
h1 ~ h3, 
h1 ~ h4,
h1 ~ h5 {
	margin-top: -3rem;
	clear:both;
}

#minitop{
	background:white;
	height:4.3em;
	width:100%;
}

h1 { font-size:2.5rem; font-weight:600;  line-height:1.2;  letter-spacing: -.01em; }
h2 { font-size:2.3rem; font-weight:600;  line-height:1.3;  letter-spacing: -.04em; }
h3 { font-size:2.0rem; font-weight:400;  line-height:1.2;  letter-spacing: -.02em; }
h4 { font-size:1.5rem; font-weight:400;  line-height:1.25; letter-spacing: -.01em; }
h5 { font-size:1.5rem; font-weight:800;	 line-height:1.3;  letter-spacing: -.01em; }
h6 { font-size:1.3rem; font-weight:600;  line-height:1.0;  letter-spacing: -.01em; }

/* -------- Forms -------- */
input,
textarea, 
option {
	height: 2.5em;
	padding: .5em 1em;
	border: 1px solid #ddd;
	box-shadow: none;
	box-sizing: border-box;	
	border: 1px solid rgba(0,0,0,0);
}

select,
button.squarebutton {
	height:2em;
	border: 1px solid #ddd;
	box-shadow: none;
	box-sizing: border-box;
}

select {
	background:white;
	padding:0 0.5em;
	border-radius:.2em;
}

button.squarebutton {
	display:inline-block;
	width:2em;
	line-height:1em;
	padding:0;
}

input[type="checkbox"],
input[type="radio"] {
	padding:0;
	height:.5em;
}
	
/* -------- Removes awkward default styles on some inputs for iOS -------- */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
 -webkit-appearance: none;
	-moz-appearance: none;
		 appearance: none; 
}

.columns input,
.columns textarea {
	max-width:100%;
}








textarea { min-height: 4em; padding: 1em 1em 1em 1em; }

input:focus,
textarea:focus,
select:focus  { border: 1px solid #15E; }

label, legend  { display: inline-block; color:#555; }

fieldset { padding: 0; border-width: 0; }

input[type="checkbox"],
input[type="radio"]  { display: inline; }

label > .label-body 
	{ display: inline-block; margin-left: .5rem; font-weight: normal; }

/* -------- Buttons -------- */



button:focus,
.button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
	border-color: #000;
	box-shadow:0 .2em .4em rgba(0,0,0,0.4);	
	outline:0;
	background-size: 100% 205%;
	background-position: left 7.5%;
}


button:disabled,
button[disabled],
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	pointer-events: none;
	color:#aaa;
}


.button, button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	display: inline-block;
	height: 3em;
	line-height: 3em;
	padding: 0 30px;
	text-align: center;	
	font-weight: 600;	
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid #bbb;
	cursor: pointer;
	box-sizing: border-box; 
	box-shadow:0 .2em .4em rgba(0,0,0,0);
	background:rgba(0,0,0,0);
	background:linear-gradient(to top,rgba(40,60,160,1)0%,rgba(20,75,140,1) 49.98%,rgba(0,0,0,0) 49.98%); /*main-gradient-inv*/
	background-size: 100% 200%;
	background-position: left top;
	transition: background-position 0.5s ease,color 0.1s ease,border-color 0.2s ease,box-shadow .5s ease;
}

input.switchbox {
	position: relative;
	box-sizing: content-box;
	appearance: none; outline: none;
	display:inline-block;
	vertical-align: middle;
	width: 3em; 
	height: 1.5em;
	background-color: #ffffff; 
	border: 1px solid #D9DADC;
	border-radius: 50px; 
	box-shadow: inset 0 0 0 0 #ffffff;
	cursor:pointer;
	transition:border-color,box-shadow ;
	transition-duration: 300ms;
	transition-timing-function: ease-out;
}
input.switchbox::after {
	content: "";
	position: absolute;	
	width: 1.45em; height: 1.45em;
	top: 0.03em; 
	left: 0.03em;
	z-index:1000;
	background-color: white;
	border-radius: 50%; 
	box-shadow: 0px 0.1em 0.25em rgba(0,0,0,0.3);
	transition:left,box-shadow ;
	transition-duration: 300ms;
	transition-timing-function: ease-out;
}
input.switchbox:before{
	content:attr(label);	
	display:absolute;
	margin-left:3.3em;
	color:#000;
}


input.switchbox:checked {
	border-color: #4ED164;
	box-shadow: inset 1.55em 0 0 0 #4ED164;
}
input.switchbox:checked::after {
	left: 1.53em;
	box-shadow: 0px 0.1em 0.25em rgba(0,0,0,0.1);
}

.primary {
	color: #FFF !important;
	background:rgb(50,40,180) !important;
	background:linear-gradient(to top,rgba(0,0,0,0) 49.98%,rgba(42,44,160,1) 49.98%,rgba(20,70,140,1) 100%) !important; /*main-gradient*/
	background-size: 100% 200% !important;
	background-position: left top !important;
}

.primary:hover,
.primary:focus {
	border-color: #15E !important;
	color: #000 !important;
	background-size: 100% 200% !important;
	background-position: left bottom !important;
}

/* -------- Lists -------- */
ul {  list-style: circle inside; }

ol { list-style: decimal inside; }


ol, ul { 
	padding:.5em 0 1em 0;
	margin:0;
}
ul ul, 
ul ol, 
ol ol, 
ol ul { margin: .5em 0 .5em 1.5em; }

ul li, 
ol li { 
	margin-bottom: .5em; 
	font-size:1.3rem;
	line-height:1rem;
}

button {
	font-size:1.3rem;
}

/* -------- Code -------- */
code {
	padding: .2rem .4rem;	
	white-space: nowrap;
	background: #EEE;	
}

.code {
	background: #EEE;
	padding:.5rem;
	font-size:0.8em;
	line-height: 1.1em;
}

pre > code { 
	overflow:auto;
	display: block;	
	border: 1px solid #DDD;
	padding: 1rem 1.5rem; 
	white-space: pre; 
	font-size: 90%;
}

pre > code:not(.maximized){
	max-height:50vh;
}

/* -------- Tables -------- */
th,  td  { padding: 0.2em 0.5em; text-align: left; }

th, tr:not(:last-child) { border-bottom: 1px solid #DDD; }

th:first-child, td:first-child { padding-left: 0; }

th:last-child,  td:last-child  { padding-right: 0; }

/* -------- Spacing -------- */
* {margin:0;}

/* -------- Utilities -------- */
.full-width { width: 100%; box-sizing: border-box; }
.max-full-width { max-width: 100%; box-sizing: border-box; }
.pull-right { float: right; }
.pull-left { float: left; }
/* -------- Misc -------- */
hr { margin:2rem 0; border-width: 0; border-top: 1px solid #DDD; }




.container::after, 
.row::after, 
.clear-float { 
	content: ""; 
	display: table; 
	clear: both; 
}

.row.one-liner {
	line-height: 2em;
	height:2em;
	display:table;
	vertical-align: middle;
	width:100%;
}

.row.one-liner > * {
	display: table-cell;
}

/* ====== SKELETON END ====== */
.topbar {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
	font-size:2em;
	font-size:4.8vmin;
	position:fixed;
	top:0;right:0;left:0;
	z-index:100;
	text-align:right;
	vertical-align:top;	
	background-color:rgba(255,255,255,0);
	background-size: 100% 300%;
	background-position: left 200%;
	background-image:linear-gradient(to bottom,#fff 33%,rgba(0, 0, 0,0.1) 34%, rgba(0,0,0,0) 66%, rgba(0,0,0,0) 100%);
	padding:1rem 6%;
	transition: background-position 0.3s ease, background-size 0.3s ease, top .5s ease;
	perspective:500px;
	pointer-events:none;
}

.topbar.inverted {
	background-position: left 250%;
	transition: background-position 0.3s ease, background-size 0.3s ease, top .5s ease;
}

.topbar.open { 
	height:100%;
	background-position: left 250%;
	transition: background-position 0s ease, background-size 0.5s ease, top .5s ease;
}

#logo { 
	height:100%; 
	width:auto;
	pointer-events:none; 
	margin-left:.25rem;
}
#logo #a .k,
#logo #a .j, 
#logo #a .cls-1 { fill:white; transition: fill .3s ease;}


.logo:hover .j,
.inverted .logo .j
{ fill:black; transition: fill .3s ease;}


.inverted .logo:hover .j
{ fill:white; transition: fill .3s ease;}




.topbar .logo{
	font-size:1rem;
	display:block;
	float:left;
	left:2rem;
	width:15rem;
	height:6rem;
	opacity:0;
	padding-left:0;
	background:rgba(255,255,255,0.0);
	perspective:800px;
	transition: background-color .3s ease, opacity .5s ease, width .3s ease, transform 1s ease-out, background-size .5s ease;
	transform:rotate3d(0,1,0,-30deg); 
}


.topbar .logo.loaded {opacity:1; transform:rotate3d(0,1,0,0deg); }
.topbar .logo.loaded a{transform:rotate3d(0,1,0, 0deg); opacity:1;}
.topbar .logo a {
	padding:.15rem;
	background:none !important;
	transform:rotate3d(0,1,0,-30deg); 
	display:block;
	color:#000;
	width:100%; 
	height:100%;
	box-sizing:border-box;
	transition:opacity .2s ease, transform 1.5s ease-out; 
}






.topbar .topmenu {
	background:rgba(0,0,0,0);
	transition:background-color .5s ease,width .2s ease,opacity .2s ease-out;
	width:50%;
	height:100%;
	opacity:1;
}

.topbar, 
.topmenu {pointer-events:none;}

.topmenu > *, 
.topbar .burger, 
.topbar .logo {pointer-events:auto;  text-align:left;}

.topbar.open.closing .topmenu { width:50%;opacity:0;}
.topbar.open.inverted .topmenu { background: rgba(255,255,255,0.9);}
.topbar.open .topmenu {
	position:absolute; 
	width:72%; 
	top:0; 
	bottom:0; 
	right:0; 
	padding-top:2em; 
	padding-left:5%; 
	pointer-events: auto;
	background:rgba(0,0,0,0.9);
}
.topbar.open .search input:not(:focus) {
	min-width:4.5em;
}

.topbar a, 
.topmenu a,
.search input {
	margin:0;
	padding:0.4em 0.7em;
	background-color:none;
	background:linear-gradient(to top,white 49.5%,rgba(0,0,0,0) 49.5%);
	background-repeat:none;
	background-size: 100% 200%;
	background-position: left top;
	transition: color 0.2s, background-color 0.1s, background-position 0.5s ease;
	cursor:pointer;
}

.inverted .topmenu > div {color:#000;}
.inverted .dropdown.open > a,
.inverted .dropdown:hover > a {color:#fff;}

.topmenu .dropdown { margin-top:0;margin-bottom:0;padding-left:0; }

.dropdown:hover .menu { transition: max-height 1.0s ease-in-out;}

.menu{
	height:0;	
	z-index:500;
	padding:0;
	list-style:none;
	transition: max-height 0.5s ease;			
	height:auto;
	max-height:0;
	overflow:hidden;
	background:rgba(140, 145, 160, 0.9);
	display:block;
}

.inverted .menu {
	background:rgba(195, 200, 210, 0.9);
}

.open > a { background-position:left bottom; color:#000; }

.open > .menu,
.menu.open { display:block; max-height:90vh;}

.menu a	{ display:inline-block; width:100%; box-sizing: border-box;}

.menu li {margin:0;}

.window {
	position:relative;
	overflow:hidden;
	margin-top:1em;
	margin-bottom:1em;
	height:20em;
}

.window .bg {
	width:100%;
	height:100%;
	background-size: cover;
	background-position:center center;
}
.window .fg {
	position:absolute;
	font-size:1.2em;
	top:50%;
	bottom:0;
	width:100%;
	vertical-align: middle;
	transform:translateY(-50%);
}
.window .fg h4, 
.window .fg p {
	font-size:1.2em;
}



.topbar .burger { 
	font-size:2rem;
	position:relative; /*this is to override zindex*/
	display:inline;
	float:right;
	clear:none;
	background-color:none;
	background:linear-gradient(to bottom,white 50%,rgba(0,0,0,0) 50%);
	background-repeat:none;
	background-size:100% 200%;
	background-position:left bottom;
	transition:color 0.2s,background-color 0.1s, background-position 0.5s ease, border-color 0.8s ease;		
	line-height:4rem;
	color:white;
}

.burgerfx {
	width: 1.5em;
	height: 2em;
	margin:0;
	padding:.4em .7em !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	position: relative;
	background-color: transparent;
	border: none;
	transition: transform 0.5s;
	z-index: 110;
}

.burgerfx:focus {
	outline: none;
}
.burgerline {
	width: 100%;
	height: 0.15em;
	transition: transform 0.4s ease-out, opacity 0.5s, background-color 0.5s;
	border-radius: 2px;
}
.burgerfx .burgerline:not(:first-child) {
	margin-top:0.3em;
}
.topbar.open .burgerfx .burgerline:nth-child(3) {
	transform: translateY(-.45em) rotate(-45deg);
}
.topbar.open .burgerfx .burgerline:nth-child(1) {
	transform: translateY(.45em) rotate(45deg);
}
.topbar.open .burgerfx .burgerline:nth-child(2) {
	transform: scaleX(0) ;
}

.topbar .burgerline, 
.topbar.inverted .burgerfx:hover .burgerline {
	background-color:#fff !important;
}
.topbar.inverted .burgerline, 
.topbar .burgerfx:hover .burgerline {
	background-color:#000 !important;	
}











































.search { padding:0; cursor:text; white-space:nowrap; }

.search > span {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	left:.065em;
	top:.16em;
	font-size:1.19em;
	transition:color .1s;
	position:relative;
	z-index:1009;
	pointer-events:none;
}

.search:hover > span,
.search.focus > span,
.inverted .search > span { color:#000;}

.inverted .search:hover > span,
.inverted .search.focus > span,
.inverted .search.open > span { color:#fff; }

.search .menu { 
	position:absolute;
	margin-left:-.40em;
	min-width:11.67em;
	transition:max-height .7s ease; /*see main.js $(".search > input")*/
}

.search.active > input { width:3em; max-width:10em;}

.search.focus > input,
.search input:hover{ width:9em;}

.search.focus > input,
.search input:hover{
	cursor:text;	
	background-position: left bottom;
	color:#000;
}

.search input,
.topmenu a.selected{ box-shadow:0px 0px 0px 1px rgba(255,255,255,0.7) inset; }

.inverted .search input,
.inverted a.selected {box-shadow:0 0 0 1px rgba(0,0,0,0.5) inset;}

.search input {
	display:inline;
	clear:none;
	border:none;
	margin:0;
	padding:0.4em 0.8em ;
	padding-left: 1.87em ;	
	margin-left: -1.87em;
	margin-top:-.14em;
	box-sizing:content-box;
	height:1.58em;
	width:0;
	min-width:2em;
	transition:color 0.2s,background-color 0.1s, background-position 0.1s ease, width .5s ease;
}

.topmenu > a {margin-left:0.5em;display:inline;padding:0.4em 0.7em; color:#fff;}

.topmenu > div {margin-left:0.5em;display:inline;color:#fff;}

.topmenu .dropdown > a { padding:0.4em 0.7em;display:block; }

.inverted .burger { background-position:left top;}

.topbar .topmenu > * { display:none;}

.topbar.open .topmenu > * {float:left;display:block;clear:both;margin-bottom:1em;line-height:2em;}

.topbar.open .topmenu > .search {margin-left: 0.92em;}

.inverted h1, 
.inverted h2, 
.inverted h3, 
.inverted h4, 
.inverted p {
	color: #fff;
}





.flexhero {
	width:100%;
	display:block;
	overflow:hidden;
}
.shorthero {
	width:100%;
	display:block;
	overflow:hidden;
}
.flexhero > img, 
.shorthero > img{
	width:100%;
	height:auto;
	position: relative;
	margin-top:-20%;
}






.unrow .column,
.unrow .columns 				{ margin-left: 1%; margin-top:1%; margin-bottom: 1%;}
.unrow .column:first-child,
.unrow .columns:first-child		{ margin-left: 0; }
.unrow .one.column,
.unrow .one.columns				{ width: 4.66666666667%; }
.unrow .two.columns				{ width: 13.3333333333%; }
.unrow .three.columns			{ width: 22%;            }
.unrow .one-third.column,
.unrow .four.columns			{ width: 30.6666666667%; }
.unrow .five.columns			{ width: 39.3333333333%; }
.unrow .one-half.column,
.unrow .six.columns  			{ width: 49.5%;            }
.unrow .seven.columns			{ width: 56.6666666667%; }
.unrow .two-thirds.column,
.unrow .eight.columns			{ width: 65.3333333333%; }
.unrow .nine.columns			{ width: 74.0%;          }
.unrow .ten.columns				{ width: 82.6666666667%; }
.unrow .eleven.columns			{ width: 91.3333333333%; }
.unrow .twelve.columns     		{ width: 100%;margin-left: 0; } 
.unrow .offset-by-one			{ margin-left: 8.66666666667%; }
.unrow .offset-by-two			{ margin-left: 17.3333333333%; }
.unrow .offset-by-three			{ margin-left: 26%;            }
.unrow .offset-by-one-third,
.unrow .offset-by-four			{ margin-left: 34.6666666667%; }
.unrow .offset-by-five			{ margin-left: 43.3333333333%; }
.unrow .offset-by-one-half,
.unrow .offset-by-six			{ margin-left: 52%;            }
.unrow .offset-by-seven			{ margin-left: 60.6666666667%; }
.unrow .offset-by-two-thirds,
.unrow .offset-by-eight			{ margin-left: 69.3333333333%; }
.unrow .offset-by-nine			{ margin-left: 78.0%;          }
.unrow .offset-by-ten			{ margin-left: 86.6666666667%; }
.unrow .offset-by-eleven		{ margin-left: 95.3333333333%; }

.align-right {text-align: right;}
.full.width {
	width:100%;
	display:inline-block;
	box-sizing:border-box;
}




a:hover {
	cursor:pointer;
}

.topbar a:hover,
.menu li a:focus{
	background-color:white;
	background-position: left bottom;
	color:black;
	transition: color 0.2s, background-color .9s, background-position 0.2s ease,background-size 0.2s;
}

.inverted a,
.inverted .search input {
	color:rgba(0,0,0,0.8);
	background:linear-gradient(to top,rgba(40,60,160,1)0%,rgba(20,75,140,1) 49.5%,rgba(0,0,0,0) 49.5%); /*main-gradient-inv*/
	background-size: 100% 200%;
	background-position: left top;
}

.inverted a:hover ,
.inverted .open > a,
.inverted .search.active > a,
.inverted .search input:focus,
.inverted .search input:hover  {
	color: white; 
	background-color:rgba(10,20,50,0.7); 
	background-position: left bottom;
}
#loadbar {
	margin:0 auto;margin-top:-0.05em;
	opacity:0;width:1%;background:#fff;height:0.2em;
	border-radius:1em;
	transition: opacity 0.4s ease-out, width 0.5s ease-in-out;
}
#superhero { overflow:hidden;  }
#superhero,
.hero{	
	position:absolute;
	padding:0;
	bottom:-10em;right:2em;left:2em;top:0;
	color:#fff;
	pointer-events:none;
	vertical-align:bottom;
	text-align:left;
	white-space:nowrap;
}
.hero{ 
	margin:auto; 
	height:10vh; 
}


.hero h1, .hero h2 { margin: auto;}
.section {position:relative; overflow:hidden;}


.heroinfo {
    position:absolute;
    width:70%;
    left:0;
    right:0;
    margin: 0 auto;
    padding:2em;
    text-align: left;
}
.heroinfo > h2  {
    margin-bottom:0;
    text-align:left;
    text-shadow: 0 0.05em 0.15em rgba(0,0,0,.2)
}
.heroinfo > p {
    text-align:justify;
    padding-top:0;
}










#youtube {opacity:0;transition:opacity 1.0s;position:relative;}
#youtube.playing { opacity:1; transition:opacity 0.5s;}
#canvas.stopped{   transition:opacity 0.5s ease-in;}
#canvas {
	background-color: #123; 
	background-image: linear-gradient(#123,#022); 
	opacity:1;
	transition:opacity 1.0s ease-out;
}	
#herobg {width: 100%;}
#herobg #youtube { pointer-events:none !important;}
#fps {
	width:100%;font-size:1em;background:black;
	text-align:center;color:white;opacity:.5;  
	padding:.5em 0;pointer-events:none !important;
	display:block;position:absolute;bottom:0;margin:0;
}

.container p {padding: .5em 0;}
#prompt{pointer-events:none;position:relative;margin:auto;width:4em;height:6em;overflow:hidden;top:-6em;opacity:0;}
#fold {position:relative;width:100%;height:0;margin:0;opacity:1;z-index:30;}
#hint {pointer-events:none;width:100%;height:0;position:absolute; left:0; right:0; bottom:-0.2em; }
#hint.smooth{transition:height .5s ease;}
#hint.intro {height:3em !important;}
#main {
	position:relative;
	/* overflow:hidden; */
	height:auto;
	min-width:100%;
	min-height:50vh;
	margin:0;	
	padding-bottom:2em;
	background:#fff;
	z-index:40;	
}
.pin-bg {
	background-attachment: fixed;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}
.unpin { background:#fff; }

.tilt { 
	margin:1.8em 0em;
	width:8em;
	height:8em;
}
.tilt {
	background:none;
	display:block;
	padding:0;
	font-size:1.2em;
	transform:scale3d(1,1,1);
	transition:transform 1.0s;
	height:auto;
	width:100%;
	min-height:4em;
	min-width:4em;
}
.tilt:hover{
	transition:transform 0.2s ease;
	transform:scale3D(1.09,1.09,1.09);
	z-index:500;
	position:relative;
}


.tile  > *:not(a),
.zoomy > *:not(a), 
.tilty > *:not(a) { 
-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, support by Chrome and Opera */
	-webkit-transform-style: preserve-3d;
		transform-style:preserve-3d;
}

.zoomy,
.tilty,
.blurry{
	position:relative;
	z-index:20;
	width: 100%;
	height: 100%;
	opacity:1.0;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	text-align:center;
	color: white;
	font-size: 1.4em;
	line-height: 1.0em;
	text-decoration: none;
	font-weight: 300;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	cursor:pointer;
	transition:background-color 0.5s;
}
.tile > a {
	padding:0.5em;
	z-index:100;
	line-height:0.9em;
	user-select:none;
	transform: translateZ(0);
	transition: opacity 0.5s, color 0.5s, background-size 0.8s ease, transform 2s ease-in-out;
}

.tile a {
	color: #fff;
}

.tile >.info {
	opacity: 0;
	color: #eee;
	transform: translateZ(0em);
	font-size:0.6em;
	position:absolute;
	overflow: hidden;
	top:50%;
	height:0%;
	width:80%;
	vertical-align: middle;
	line-height: 1em;
	transition: opacity 0.5s ease, height 0.5s ease, top 0.5s ease, bottom 0.5s ease;
}
.tile:hover >.info {
	display:block;
	opacity: 1;	
	bottom:0;
	height:20%;
}

.tile:hover > a { 
	transform: translateZ(1em); 
	transition:color 0.5s, transform 0.5s, background-size 0.2s ease;
}

.tilty.inactive { z-index:-1000;}

.tile > .bg, 
.zoomy > .bg, 
.tilty > .bg {
	overflow:hidden;	
	width:100%;height:100%;
	position:absolute;top:0; left:0;
	opacity:1.0;
	background-size:cover;
	background-position:50% 50%;
	background-repeat: no-repeat;
	transition:opacity 1s, background-size 1s ease, background-position 1s, transform 1s;	
}

.zoomy { overflow:hidden; }
.zoomy > .bg {
	transition: transform 0.5s;
	transform: scale(1.15,1.15);
}
.zoomy:hover > .bg { 
	transition: transform 0.25s ease;
	transform: scale(1.0,1.0);
}
.dark .zoomy > .bg, 
.dark .tilty > .bg {
	background-color:rgba(0,5,10,0.5);
	background-blend-mode:multiply ;
}
.dark .tilty.inactive > .bg, 
.tilty.inactive > .bg {  
	opacity:0.5; 
	transition: opacity 1s !important;
}
.dark .tilty:hover > .bg {background-color:rgba(0,5,10,0.1);}

.dark .tilty:hover > .bg,
.tilty:hover>.bg {
	opacity:1.0;
	transition:opacity 0.4s, background-size 1s ease, background-position 0.1s ease,background-color 1s !important;
	background-size:175%;
}







.banner {
	position:relative;
	background: white;
	overflow:hidden;
	min-height:5em;
	margin-bottom: 1em;
	line-height:1.3;
	overflow:hidden;
}
.banner .text {
	display:inline-block;
	padding:.5% 2% 2% 2%;
	color: #444;
	width:79.8%;
	box-sizing: border-box;
}
.banner a , 
.white-text .banner a{
	color: #000;
	background-image: linear-gradient(90deg, #000 0%, #000 100% );
}
.banner .imgquare {
	display:block;
	float:right;
	background: black;
	width: 20%;
	padding-bottom:20%;
	background-size:cover;
	background-position: center bottom;
	cursor:pointer;
}
img.icon {
	display: inline-block;
	height:2em;
	padding:0.2em;
	vertical-align: middle;
}







.pad-top { padding-top:1.4em;}
.pad-bottom { padding-bottom:1.4em;}
.pad { padding:1.4em 0; }

span.divide { display:inline-block; }
span.divide:not(:first-child){ padding-left:0.5em; }
span.divide:not(:last-child) { 	
	padding-right:0.5em;
	border-right:2px solid #777;
}


.footer {
	font-size:1.1rem;
	line-height:1.2rem;
}

.footer .description {

}

.footer .container {
	padding-top:1em;
	padding-bottom:1em;
}

.footer ul li {
	list-style-type:none;
	line-height:1.5rem;
}

/*linearicon */
.lnr{
    opacity:1;
    transition:opacity .2s ease !important;
}

.footer a.lnr { 
	padding-bottom:0.3rem;
	vertical-align: middle;
}

.footer a .lnr {
	position:relative;
	bottom:-0.1em;
}




.white-text { color: #f3f3f3; }
.white-text a {
	color: #f8f8f8;
	background-image: linear-gradient(90deg, #efefef 0%, #efefef 100%  );
}

.gray-text { color: #999; }
.gray-text > a {
	color: #ccc;
	background-image: linear-gradient(90deg, #ccc 0%, #ccc 100%  );
}

.nospaces { font-size:0; }
.nospaces > * { font-size:1rem; }

.center {
	text-align:center;
}
.centerpiece,
.columns:first-child.centerpiece {
	margin-left :auto;
	margin-right:auto;
	margin-top:2em;
	float: unset;
}


.card { 
	border: 1px solid #ccc;
	padding: 2em 2em;
	background:#f4f4f4;
	box-shadow: 0 0.2em 1em rgba(0,0,0,0.1);
}
.card > h4 {
	margin: 0;
}


.metatable {
	border:2px solid #ccc;	
	width:80%;
	padding:1em;
	background:none !important;
}
.metatable div, 
.metatable div p {
	line-height:0.9em;
}

.infobox .metatable div p {
	display:inline;
	line-height:1.2em;
	padding:0.15em 0.2em;
	box-decoration-break:clone !important;
	white-space: pre-wrap;
}


.metatable tr {
	display:block;
	margin:-0.9em 0em;
	padding:0;
	height:100%;
	box-sizing:content-box;
	border:none !important;
}

.metatable tr td {
	display:inline-block;
	background:white;	
	border:none !important;	
	margin:0;
	margin-left:-0.6em;
	padding:.8em .2em;
	padding-top:0.5em;
	padding-left:1em;
	padding-right:1em;
	height:100% !important;
}

.loadcircle{
	z-index: 9000 !important;
	display:block;
	margin-left:auto;
	margin-right:auto;
	transition:opacity 0.5s ease;
	opacity:1;
	pointer-events: none;
}

.loadcircle.stopped {
	opacity: 0;
	transition:opacity 0.1s ease;
}

.loadcircle.error {
	opacity: 0.5;
}

.loadcircle.error .loader .loader-path{
	-webkit-animation: dash 1.5s ease-in-out infinite;
			animation: dash 1.5s ease-in-out infinite;
			stroke: rgb(200, 40, 30) !important
}

.loadcircle.hiddn {
	display: none;
}

.loadcircle .loader {
	position: relative;
	margin: 0px auto;
	width: 3em;
	height:3em;
}
.loadcircle .loader:before {
	content: '';
	display: block;
	padding-top: 100%;
}

.circular-loader {
	-webkit-animation: rotate 2s linear infinite;
			animation: rotate 2s linear infinite;
	height: 100%;
	-webkit-transform-origin: center center;
		-ms-transform-origin: center center;
			transform-origin: center center;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin: auto;
	pointer-events: none;
}

.loader-path {
	stroke-dasharray: 150,200;
	stroke-dashoffset: -10;
	-webkit-animation: dash 1.5s ease-in-out infinite;
			animation: dash 1.5s ease-in-out infinite;
	stroke-linecap: round;
}


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

@keyframes rotate {
	100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
	}
}
@-webkit-keyframes dash {
	0% {
		stroke-dasharray: 1,200;
		stroke-dashoffset: 0;
		stroke: #222;
	}
	50% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -35;
		stroke: #555;
	}
	100% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -124;
		stroke:#222;
	}
}
@keyframes dash {
	0% {
		stroke-dasharray: 1,200;
		stroke-dashoffset: 0;
		stroke: #222;
	}
	50% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -35;
		stroke: #555;
	}
	100% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -124;
		stroke:#222;
	}
}


.small {
	font-size: 0.9em;
}

.form .row.small,
.row.form.small {
	line-height:1.5;
	height:100%;
}
.autosave {
	cursor:pointer;
}
.editable {
	cursor: pointer;
	padding:0.2em 1em;
	border-radius:0.5em;
	background:#e5f2ff;
	min-height:2rem;
	min-width:5rem !important;
}
.editable:hover::after,
.editable:hover{
	background:#bef;			
}
.editable:hover::after {
	display: inline-block;
	position: absolute;
	content: "\270F";
	vertical-align:middle !important;
	text-align:center;
	width:2em;
	height:2em;
	line-height:2em;
	border-radius:50%;
	padding: 0 !important;
	margin-right: 0.4em;
	transform: rotate(135deg);
}

input.editable {
	width:unset;
	padding:0.1em;
	background:#daf3ff;
	border: 0;
	cursor:text;
	min-width:5em !important;
	min-height:2em !important;
	border-radius:4px;
	box-shadow: 0 0 2px 1pt #148;
}
input:disabled {
	background:#fafafa;
	color: #888;
}



/*------------- DATEPICKER -------------*/

.qs-datepicker-container {
	position:absolute;
	min-width:17em;
	font-size:100%;
	z-index:5000;
}
.qs-datepicker-container .qs-datepicker,
.qs-datepicker-container .qs-overlay{
	border-radius:1em;
	border-top-left-radius: 0em;
}
.qs-overlay .qs-overlay-year,
.qs-overlay .qs-overlay-month {
	font-weight:bold;
	padding:0;
}
.qs-overlay .qs-submit {
	background:#ccc;
	color:#000;
	width:6em;
	height:2em;
	text-align:center;
	line-height:2em;
	font-weight:bold;
	vertical-align:middle;
	border:none;
	border-radius:2em;
	padding:0;
	transition:background-color 0.5s ease, color 0.5s ease;
}
.qs-overlay .qs-submit:hover {
	background:#fff;
	color: #000;
}

.qs-datepicker-container .qs-datepicker {
	background:#fff;
	border:2px solid #aaa;
	box-shadow: 0 5pt 10pt 5pt rgba(0,0,0,0.2);
	overflow:hidden;
}

.qs-datepicker .qs-controls {
	background:#f0f0f0;
	border-bottom:1px solid #eee;
}

.qs-datepicker .qs-month-year{
	padding: 0 1em;
	margin:0.2em 0;
	border-radius:2em;
	border: none !important;
	transition: background-color 0.2s ease;
}
.qs-datepicker .qs-month-year:hover {
	background:#ccc;
	border: none !important;
}

.qs-controls .qs-arrow{	
	border:none;
	padding:0 1em;
	margin-left:1em;
	margin-right:1em;
	border-radius:0.8em;
}
.qs-controls .qs-arrow::after {	
	border:none;
}
.qs-controls .qs-arrow.qs-left::after{
	content: "\25C0";
	margin-left:10px;
	right:40%;
}
.qs-controls .qs-arrow.qs-right::after{
	content: "\25BA";
	margin-right:10px;
	left:40%;
}
.qs-datepicker .qs-day {
	font-size:80%;
	color:#ccc !important;
}
.qs-datepicker .qs-squares {
	padding:0.8em;
}
.qs-datepicker .qs-square {
	border-radius:1em;
}
.qs-datepicker .qs-day {
	color: #2ad;
}
.qs-datepicker {
	line-height:2.3em;
}

/*------------- QUILL.JS -------------*/

.quill {
	margin-top:2em;
}

.ql-toolbar {
	text-align:center;
	position:absolute;
	background:white;
	z-index:3000;
}

.ql-toolbar button{
	height:1.5em;
	width:1.5em;
}

.ql-container .ql-editor { 
	min-height:15em;
    font-size: 1.4em;
}
.ql-toolbar span.ql-header.ql-picker{
	border:1px solid #ccc;
	border-radius:1em;
	padding:0 0.5em;
	width:10em;
	height:2em;
	line-height:2em;
	margin-top:0;
}

.ql-toolbar span.ql-header.ql-picker .ql-picker-label {
	line-height:1.5em;
	font-size:1.2em;
}
.ql-toolbar .ql-formats .ql-picker:hover,
.ql-toolbar .ql-formats button:hover
{
    box-shadow: none;
    background:#ddd;
}

.ql-container .ql-editor {
	padding-top:4em;
}
.ql-toolbar.sticky {
	position: fixed;
	top:0;
	border-top:none !important;
}

.resizable {
	resize:both;
	overflow:auto;	
}


/*!
 * Quill Resize Module v2.0.8
 * https://github.com/mudoo/quill-resize-module
 */
.ql-resize-overlay {
	position: absolute;
	box-sizing: border-box;
	border: 1px dashed #444;
	pointer-events: none
}

.ql-resize-toolbar {
	position: absolute;
	top: -12px;
	right: 0;
	left: 0;
	height: 0;
	min-width: 120px;
	text-align: center;
	color: #333;
	box-sizing: border-box;
	cursor: default;
	pointer-events: all
}

.ql-resize-toolbar button {
	display: inline-block;
	min-width: 24px;
	height: 24px;
	height:2em !important;
	padding: 2px;
	background-color: #fff;
	border: 1px solid #999;
	vertical-align: middle
}

.ql-resize-toolbar button:first-child {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px
}

.ql-resize-toolbar button:last-child {
	border-bottom-right-radius: 3px;
	border-top-right-radius: 3px
}

.ql-resize-toolbar button:not(:first-child) {
	border-left: none
}

.ql-resize-toolbar button.active {
	filter: invert(20%)
}

.ql-resize-toolbar svg {
	width: 18px
}

.ql-resize-handle {
	position: absolute;
	height: 12px;
	width: 12px;
	background-color: #fff;
	border: 1px solid #777;
	box-sizing: border-box;
	opacity: .8;
	pointer-events: all
}

.ql-resize-handle.tl {
	top: -6px;
	left: -6px;
	cursor: nwse-resize
}

.ql-resize-handle.tr {
	top: -6px;
	right: -6px;
	cursor: nesw-resize
}

.ql-resize-handle.br {
	right: -6px;
	bottom: -6px;
	cursor: nwse-resize
}

.ql-resize-handle.bl {
	left: -6px;
	bottom: -6px;
	cursor: nwse-resize
}

.ql-resize-display {
	position: absolute;
	padding: 4px 8px;
	text-align: center;
	background-color: #fff;
	color: #333;
	border: 1px solid #777;
	box-sizing: border-box;
	opacity: .8;
	cursor: default;
	line-height: 1
}

.ql-resize-style-left {
	float: left;
	margin: 0 1em 1em 0
}

.ql-resize-style-center {
	display: block;
	margin: auto;
	text-align: center
}

.ql-resize-style-right {
	float: right;
	margin: 0 0 1em 1em
}

.ql-resize-style-full {
	width: 100% !important
}

.ql-resize-style-full>* {
	width: 100%
}




/*------------- DROPZONE 5.7.2 -------------*/
.legend {
	width:100%;
	text-align: center;
	color:#aaa;
	font-size:0.7em;
	margin: 0 auto;
}
.dropzone {
	padding: .2em;
	border-radius:.8em;
	background:#fafafa;
	border-color: #ccc;
	width:100%;
	min-height:12.4em;
	overflow-x: auto;
	overflow-y:hidden;
}
.dropzone div.dz-preview {
	text-align: center;
	margin:0.2em !important;
}

.dropzone .dz-preview:first-child::after{
	content: '\2605';
	position: absolute;
	width: 2rem;
	height: 2rem;
	top: 0.5rem;
	left: 0.5rem;
	background: black;
	border-radius: 50%;
	z-index: 1000;
	color: white;
	font-size: 0.8em;
	line-height: 2rem;
}

.dropzone .dz-preview.dz-image-preview {
	background:none;
	height:11.5em;
}
.dropzone .dz-preview .dz-image {
	width:5em;
	height:12.5rem;
	border-radius:10px;
	background:#f8f8f8;
	transition:width 0.5s ease;
}
.dropzone .dz-preview .dz-image:hover {
	--width:8em;
}




.dropzone .dz-error .dz-image::after,
.dropzone .dz-del .dz-image::after,
.dropzone .dz-pub .dz-image::after,
.dropzone .dz-image::after{
	position: absolute;
	display: block;
	color: white;
	width: 14rem;
	text-align: center;
	line-height: 2.1rem;
	top: 0.5rem;
	right: -5.6rem;
	transform: rotate(45deg);
	z-index: 800;
	font-size: 0.7em;	
	font-weight:bold;
}
.dropzone .dz-error .dz-image::after{
	background:red;
	content:'error';
	color:yellow;	
}
.dropzone .dz-image::after{
	background:#f8f8f8;
	content:'will publish';
	color:#555;
}

.dropzone .dz-error .dz-image {
	background:red;
	border:3px solid red;
	opacity:0.1;
	pointer-events: none !important;
}
.dropzone .dz-pub .dz-image{
	border:4px solid black;
}
.dropzone .dz-pub .dz-image::after{
	background: black;
	content: 'published';	
}
.dropzone .dz-del .dz-image{
	opacity:0.6;
	border:4px solid #f00;
}
.dropzone .dz-del .dz-image::after{
	background: #f00;
	content: 'will delete';	
}
.dropzone .dz-preview .dz-image img {
	position:absolute;
	left:-50%;
}
.dropzone .dz-preview:hover .dz-image img {
	-webkit-transform:none;
	-moz-transform:   none;
	-ms-transform: 	  none;
	-o-transform: 	  none;
	transform: 		  none;
	-webkit-filter:   none;
	filter: 		  none; 
}
.dropzone .dz-preview .dz-details {
	opacity:1;	
	margin:0;
	padding:0;
	width:100%;
	font-size:0.8em;
	text-align:center;
	margin-top:7em;
}
.dropzone .dz-preview .dz-details span {
	border:none;
	background-color:rgba(0,0,0,0) !important;
	text-align: center;
	font-size:0.6em;
	margin:0;
	width:100%;
	line-height:100%;
	background:none;
	border-radius:none;
}
.dropzone .dz-details .dz-filename {
	margin-top:5.8rem;
	font-size:.9rem;
	display:none;
	text-wrap: wrap;
}
.dropzone .dz-preview:hover .dz-filename{
	display:block;
}
.dropzone .dz-preview:hover .dz-size{
	display:none;
}
.dropzone .dz-details .dz-size {
	margin-top:5.7em;
	font-size:1.7em;
	color:#777;
}
.dropzone button,
.dropzone button:hover {
	border:none;
	text-align:center;
	font-size:0.5em;
	box-shadow: none;
	padding:0.2em 1.3em;
	cursor:pointer;
	line-height:1.5em !important;
	vertical-align: middle !important;
	z-index:5000 !important;
	margin-top:4.2em;
}
.dropzone .dz-preview .popup {
	line-height:2.5rem;
	position: absolute;
	display: block;
	visibility: hidden;
	background: white; 
	width: 90%;
	height: 7em;
	left: 5%;
	bottom: 1.4em;
	z-index: 2000;
	box-shadow: 0 9px 8px rgba(50,50,50,0.5);
	border-radius: 0.3em;
	line-height: 2.5rem;
	pointer-events:none;
}

.dropzone .dz-preview .popup input,
.dropzone .dz-preview .popup button { 
	pointer-events:all;
}
.dropzone .dz-preview .popup .bubble {
	width:12em;
	height:8em;
	position:absolute;
	top:8.5em;
	left:-4em;
	z-index:2000;
	border-radius:0.5em;
	overflow:hidden;
	box-shadow: 0 8px 10px rgba(0,0,0,0.2);
	border:2px solid white;
}
.dropzone .dz-preview .popup .bubble img {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	object-fit:cover;
}

.dropzone .dz-preview:hover .popup{
	visibility: visible;
}
.dropzone .dz-preview .popup::after {
    content:'';
    position: absolute;    
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
	height: 0;
	bottom:		-0.25em;
    border-top:  0.3em solid white;
    border-left: 0.3em solid transparent;
	border-right:0.3em solid transparent;
}
.dropzone .popup .options {
	width:100%;
	font-size:0.7em;
	text-align:left;
	height:4.4rem;
}
.dropzone .popup .options:before {
	content:'show in';
	display:block;
	color: #777;
	padding:0;
	margin:-.5rem;
	text-align:center !important;
}
.dropzone .popup .options label {
	margin-top:0.2rem;
}
.dropzone .popup .options input {
	margin:0.3rem 0.1rem;
	display:block;
}

.dropzone{
	margin-bottom:3rem;
}

.dropzone::before {
	content:'drop images or click here to upload';
	position:absolute;	
	margin-top:21.5rem;
	font-size:0.8em;
	text-align:center;
	width:100%;
	color: #ccc;
	pointer-events:none;
}
.dropzone::after {
	float:right;
	content:attr(tag);
	bottom:0;
	margin-top:2.8em;
}

.dropzone::after,
.json-document::after {	
	font-size:5rem;
	padding:2rem;
	color: #ddd;
	font-weight:bold;
}
.json-document a.json-toggle:not(.collapsed)::before {
	margin-top:-0.3em;
	color:black;
}
.json-document a.json-toggle.collapsed::before {
	margin-top:-0.2em;
	color:black;
}
.json-document .json-dict,
.json-document .json-array {
	margin-top:0.5em;
}
.json-document ol.json-array li a.json-toggle::before {
	margin-top:0;
	color: gray;
}
.json-document {	
	background:#fff;
	border:1px solid #eee;
	border-radius: 1em;
	font-size:0.9em;
	line-height:0.6em;
	margin:1em 0;
	font-family:sans-serif;
}
.json-document::after {
	position:absolute;
	content:attr(status);
	top:0.2em;
	right:0; 
}
#jsonviewer {	
	position:fixed;
	top:3em;
	right:0;
	opacity:0.8;
	z-index:9999;
	height:10vh;
	width:10vw;
	overflow-y:scroll;
	overflow-x:hidden;
	transition:opacity 0.3s ease, height 0.3s ease, width 0.3s ease;
	text-wrap:nowrap;
}
#jsonviewer:hover {
	opacity:1.0;
	height:60vh;
	width:40vw;
}

.dropzone .dz-error-message {
		z-index:9999 !important;
}










.alert  {
	position: fixed;
	left:2em;
	right:2em;
	bottom:2em;
	padding:2em;
	border-radius:1em;	
	background: #fff;
	z-index:10000;
	box-shadow:0 5px 15px rgba(0,0,0,0.2);
	transition:bottom 1s ease;
}

.alert.log {
	background: #fff;
	color: #234;
}
.alert.warn {
	background: #fea;
	color: #f62;
}
input.error,
.alert.error {
	background: rgb(255, 215, 210);
	color:#400;
	transition: background-color .5s ease, color 1s ease;
}
.alert.error hr {
	background:black;
	border-color:#b88;
}


.nomargin {margin:0;}
span.nomargin {
	padding: 0.2em;
}
.blue-bg { background: #69d ;}
.gray-bg { background: #333 ;}
.red-bg { background: #d32 ;}
.white-bg { background: white;}
.black-bg { background: black;}
.yellow-bg { background : #fd2;}
img.mini {
	width:100%;
	height:auto;
	display:block;
	pointer-events: none;
}



.container a:not(.icon) {  
	display: inline-block;
	background-repeat:no-repeat;
	background-size: 0% 0.1em;
	background-position: center bottom;
	transition: background-size 0.1s ease, background-position 0.1s ease;
}



























/* app styling { */
.button, 
button,
input[type="submit"],
input[type="reset"],
input[type="button"] ,
.primary,
.inverted a,
.inverted .search input {
    color: #000;
    background:rgba(0,0,0,0);
    background-image:linear-gradient(to top,#000 49.8%,rgba(255,255,255,0.0) 49.8%); /*main-gradient-inv*/
    background-size: 100% 200%;
	background-position: left top;
}


.silver-bg {
    background:linear-gradient(to top,#eee 0%, #ddd 100%);
}
.blue-bg {
    background:linear-gradient(to top,rgba(70,90,130,1)0%,rgba(50,120,160,1) 100%); 
}
.black-bg {
    background: black;
}
.gray-bg {
    background:rgb(55,54,52);
}
.red-bg {
	background:linear-gradient(to top,rgba(150,30,50,1)0%,rgba(170,40,30,1) 100%);
}


.topbar .logo:hover, 
.inverted.topbar .logo:hover{
    background-position: left bottom;
}

.topbar .logo{
    background-image:linear-gradient(to top,#fff 49.8%,rgba(255,255,255,0.0) 49.8%); /*main-gradient-inv*/
    transition: background-position .2s ease, border-color 0.1s ease;
    background-size: 100% 200%;
    background-position: left top; 
}

.inverted.topbar .logo {
    background-image:linear-gradient(to top,#000 49.8%,#fff 49.8%); /*main-gradient-inv*/    
    transition: background-position .2s ease, border-color 0.1s ease;
    background-size: 100% 200%;
    background-position: left top; 
}

.container a,
.footer a { 
    background-image: linear-gradient(90deg, #000, #000 100%  );
}

.white-text a,
.gray-text a {
    color: #ccc;
	background-image: linear-gradient(90deg, #e0e0e0 0%, #efefef 100%  );
}

.article {
    font-family: "Questrial", Helvetica, Arial, sans-serif;
}
.article a,
.article .gray-text a {
    color:#000;    
    box-sizing: border-box;
    border-bottom:0.1em solid #ddd;
    margin-bottom:-0.1em;
    background-image: linear-gradient(90deg, #000, #000 100%  );
}

input:focus,
textarea:focus,
select:focus  { 
    box-shadow:inset 0 0 0 1px #000;
}

.topbar.open .topmenu { background:rgba(0,0,0,0.8);}

.topbar.open.inverted .topmenu { background: rgba(255,255,255,0.9);}

.zoomy > a{
    color:#fff;
    position:absolute;
    padding:0.5em 0;
    left:1em;
    font-size: 2.5rem;
    max-width:80%;
    opacity: 1;
    bottom:0.5em;    
    text-align:left;
}

.tile  > a, 
.zoomy > a, 
.tilty > a {
    background-image: linear-gradient(90deg, #fff 0%, #fff 100%  );
    border:none;
}
#editorjs {
    border:1px solid black;
}

#last_autosave>a {
    font-weight: bold;
    color:#000;
}
#last_autosave {
    display:inline-block;
    padding-left:0.2em;
    font-size:0.8em;
    color:gray;
    vertical-align: middle;
    text-align:left;
}

#autosave_history {
    max-height: 5em;
    overflow: auto;
    min-height: 6em;
    max-height: 12em;
    border-top:1px solid #aaa;
    color: #aaa;
    background:#f8f8f8;
    overflow-y:auto;
}

#images {
	font-family: 'Courier New', Courier, monospace;
	height: 15em;
	font-size: 0.6em;
	word-wrap:break-word;
	overflow-y:auto;
	overflow-wrap: break-word;
}

.vspacer {
    height:30%;
    height:30vh;
}

.box a {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}







.zoomy a.glightbox {
    max-width:100%;
    width:100%;
    height:100%;
    position:relative;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

button.gbtn,
button.gbtn:focus{
    line-height:unset;
    overflow:visible;
    display:block !important;
    background-color:rgba(0,0,0,0.5) ;
    background-image:none;
    transition: color 0.5s ease, background-color 0.5s ease;
    box-shadow:none;
    height:3em;
    color:rgba(255,255,255,0.3);    
}

button.gbtn:hover{    
    color:rgba(255,255,255,1);
    background-color:rgba(255,255,255,0.4);
    background-position:left bottom;
}

button.gnext::after {
    position: relative;
    right: 0.25em;
    content: "\276F";
}
button.gprev::after {
    position: relative;
    left: -0.3em;
    content: "\276E";
}



#hint {
    bottom:-4em;
}

.unpublished,
.frontpage {
	overflow:hidden;
	display:block;
	position:relative !important;
}
.unpublished .imgquare, 
.unpublished .text, 
.unpublished .bg{
	opacity:0.5;
}
.unpublished::after {	
	position: absolute;
	display: block;
	content: 'unpublished';
	text-align: center;
	color: #f70;
	background: #fff;
	width: 25rem;
	line-height: 3.5rem;
top: 3.7rem;
  right: -6.3rem;
	transform: rotate(45deg);
	font-size: 1.6em;
	z-index: 30;
}
.frontpage:before {
	position: absolute;
	display: block;
	content: '\2605';
	text-align: center;
	color: #fff;
	background: #fa0;
	background: linear-gradient(to left,#fc0 0%,#f90 70%, #f84 100%);
	line-height: 6.0rem;
	width: 18rem;
	top: -6.5rem;
  	right: -9.2rem;
	transform: rotate(45deg);
	font-size: 3em;
	z-index: 800;
	padding-top: 2em;
	padding-bottom:0.05em;
}
.banner .text .small {
    padding-top:0;
}
.banner .text {
    padding-left:0;
    padding-right:0.2em;
    font-size:1.2em;
}
.mapframe {
    min-height:30vh;
}

.intro {
    font-size:1.4em;
    line-height:1.8em;
}

.tabulator {
    --border:1px solid #ddd;
    /* border-collapse: separate; */
    background:#fcfcfc;
    background:#fff;
    color:#777;
	box-sizing:content-box;
	overflow-x:auto;
}
.tabulator td{
    padding: 0.21em 1em 0.21em 0;
    width:50%;
    /* white-space: nowrap; */
}
.tabulator td:not(:last-child){
    /* --border-right:1px solid #eee; */
}
.tabulator tr:not(:last-child) td{
    /* --border-bottom: 1px solid #eee; */
}

.tabulator .tabulator-col-title {
    text-align:center;    
    background:none;
}
.tabulator .tabulator-header .tabulator-col {
    background:#eee;
}
.tabulator, 
.tabulator .tabulator-header {
    background:none;
}
.tabulator-row.tabulator-selectable:hover {
    background-color:unset;
}
.tabulator-row.tabulator-row-even {
	background-color:#f6f6f6;
}

.tabulator-cell > input {
    background-color:#aef;
}
.tabulator .tabulator-row:hover {
	background-color:#def;
}
.tabulator .tabulator-column:hover {
	background-color:#eef;
}
.tabulator .tabulator-cell:hover {
    background-color:#e5f5ff;
}

.noselect {
	user-select:none !important;
}

.tabulator-cell.delbutton::after,
.tabulator-cell.addbutton::after {
	font-size:1.3em;
	position:absolute;
	height:100%;
	width:100%;
	left:0;
	top:0;
	text-align:center;
}
.tabulator-cell.addbutton::after{
	content:"+";
	content:"\0271A";
	color:rgba(0,0,0,0.25);
}
.tabulator-cell.addbutton:hover::after {
	background:black;
	color: white;
}
.tabulator-cell.delbutton::after{
	content:"x";
	content:"\02716";
	color:rgba(255,0,0,0.25);
}
.tabulator-cell.delbutton:hover::after {
	background:red;
	color: white;
}

.tabulator-cell .fa-minus-square-o::after,
.tabulator-cell .fa-plus-square-o::after {
	border-radius:0.4em;
	margin:0.25em;
	padding:0.25em;
	position:absolute;
	line-height:0.7em;
	text-align:center;
	vertical-align:middle;
	font-size:1.2em;
	width:0.7em;
	height:0.7em;
	left:12%;
	top:-0.15em;
	background:#ccc;
}

.tabulator-cell .fa-minus-square-o::after{
	border-radius:0.4em 0.4em 0 0;
	height:1.2em;
	z-index:10000;
}
.subtabulator {
	border:3px solid #ccc !important;
	--border-left:4px solid #ccc !important;
	--background:rgba(255,255,255,0.7);
	border-radius:0 0 0.5em 0.5em;
	max-width:80vw !important;
	margin:0 auto 1em auto;
	padding:1em;
}




.tabulator-cell .fa-plus-square-o::after {
	content:"\002B";
}
.tabulator-cell .fa-minus-square-o::after {
	content:"\2212";
}

a.button { 
	color: #000;
    background:rgba(0,0,0,0);
    background-image:linear-gradient(to top,#000 49.8%,rgba(255,255,255,0.0) 49.8%); /*main-gradient-inv*/
    background-size: 100% 200%;
	background-position: left top;
	transition: background-position 0.2s ease,color 0.1s ease,border-color 0.2s ease,box-shadow .5s ease;	
}
a.button:hover, 
button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover  {
	color: #fff;
	border-color: #000;
	outline: 0; 
	box-shadow:0 .2em .4em rgba(0,0,0,0.4);	
	background-size: 100% 205%;
	background-position: left 99.5%;
	transition: background-position 0.2s ease,color 0.1s ease,border-color 0.2s ease,box-shadow .5s ease;	
}
a.button, 
.tabulator-add-line {
	position:relative;
	text-align:center;
	top:1px;
	border-radius:2em;
	margin-left:auto;
	box-sizing:border-box;
	left:50%;
	transform:translateX(-50%);
	background-image:linear-gradient(to top,#000 49.8%,rgba(255,255,255,1.0) 49.8%); /*main-gradient-inv*/
	background-color:unset;
}

.tabulator-add-line {
	padding:0 1.5em;
	font-size:0.8em;
	border-radius:0 0 2em 2em;
	top:-0.05em;
	height:2em;
	line-height:2em;
	border-top:none;
}

.editbox {
    position:absolute;
    top:0.1em;
	right:0;
    padding:0.5em;
    z-index:50000;
}
a.icon {
    background-image:none;
    opacity:0.85;
    transition:opacity 0.2s ease;
}

a.icon:hover {
    opacity:1.0;
}
/* app styling }*/




/*splide styling { */
.splide {
    background:white;
}
button.splide__arrow {
    border-radius:0;
    opacity:0.2;
    margin-top:-4em;
    width:2.5em;
    height:8em;
    transform: scale(1.5,1.5);
    box-shadow: none;
    background:rgba(0,0,0,0.0);
    transition:opacity 0.3s;
}
button.splide__arrow > svg {
    fill:rgba(255,255,255,0.5);
    transition: fill 0.5s;
}
button.splide__arrow:hover  > svg {
    fill:white;
}

button.splide__arrow:hover,
button.splide__arrow:active,
button.splide__arrow:visited
{  
    background-position: left bottom;
    opacity:1;
} 

ul.splide__pagination {
    bottom: 0;
}
ul.splide__pagination > li {
    position: relative;
    margin:0 3px;
    padding:0;
    line-height:0.9;
}
button.splide__pagination__page {
    background:white;
    opacity:0.5;
    height:0.4em;
    width:0.4em;
    margin:0;    
    margin-bottom:-0.5em;
    border-radius: 0;
    transition:width 0.5s ease, opacity 0.3s ease;
    box-shadow:none;    
    padding:0;    
    background:white;
}

button.splide__pagination__page:hover{
    box-shadow: none;
    background:white;
    opacity: 1;
}
button.splide__pagination__page.is-active {
    width:1em;
    transform:scale(1.0);
}

ul.splide__pagination {
	pointer-events:none;
}
.splide__pagination__page {
	pointer-events:auto !important;
}

li.splide_slide {
    transform: perspective(500) translateZ(0);
}
li.splide__slide > a.home::before {
	content: '>';
	display:inline-block;
	transform:scale(.5,1) translate(0.2em , 0.1em);
	position:absolute;
	left:.2em;
	opacity:1;
	transition: opacity 0.1s ease;
}

li.splide__slide > a.home { 

	color:black;
	transition: opacity 0.5s ease;
    text-shadow: none;
	pointer-events:all;
	transition:color 0.2s ease, max-width .5s ease-out,  max-height 0.25s ease-out, padding-right 0.5s ease, opacity 0.5s ease;
	position:absolute;
	bottom:2rem;
    left:1.5rem;
	transform: perspective(500) translateZ(100em);
	margin-inline:auto;
	vertical-align:bottom;
	display:inline-block;	
	max-width:40vw;
	max-height:40vh;
	mix-blend-mode: screen;
	max-width:1em;
	max-height:1em;
	overflow:hidden;
	inline-size:auto;
}
li.splide__slide > a {
	position:absolute;
	left: 3rem;
	bottom: 0;
	z-index:9999;
	font-size:1.5rem;    
	font-family: "Arvo", serif;
    font-weight:bold;
    font-style: normal;
}
li.splide__slide:hover > a.home{
	opacity:1;	
	cursor:pointer;
	max-width:40vw;
	max-height:40vh;
	bottom: 2rem;
	transition:bottom 0.5s ease-in-out, color 0.2s ease, max-width 0.4s ease,  max-height 1.5s ease-in, padding-right 0.5s ease, opacity 0.5s ease;
}

li.splide__slide > a.home > p {
	color:rgba(0,0,0,0);
	padding-left:1.2em;
	vertical-align: bottom;
}



li.splide__slide > a:not(.home) {
	bottom: 1.55rem;
	left:0rem;
}
li.splide__slide > a:not(.home) > p {
	font-size: 2rem;
	padding:0.25em 1em;
	padding-left:1em;
	vertical-align: bottom;

}


li.splide__slide > a> p {
	font-size:1.2rem;
	padding:0.1em 0.4em;
	line-height:1.35em;
	background: white;
	display:inline;
	white-space: pre-wrap;
	text-align:left;
	box-decoration-break:clone;
	transition: color 0.5s ease;
	--mix-blend-mode: screen;
}
li.splide__slide:hover > a > p {
	max-width:100%;
	max-height:100%;
	color:rgba(0,0,0,1);	
}







.splide__progress {
    position: absolute;
    bottom:0;
    right:1em;
    height:0.2em;
    width:10%;
    padding:0;
    background:rgba(0,0,0,0.25);
}
.splide__progress__bar {
    background:rgba(255,255,255,1);
    height:100%;
}

/*splide styling } */


.panel {
	background: #f4f4f4;
	border-color: #ddc;
	padding: 1rem;
	border-radius:1rem;
}




select:focus option:hover{
	background:red;
	color:blue;
}

/*
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,00); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
*/
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 25px;
    border-radius: 25px;
	color:red;
	background:blue;
}
::-webkit-scrollbar-button {
	display: none;
}
.imagesection {
	margin-top:3em;
}
.imagesection h2 {
	position:relative;
	background:linear-gradient( 180deg, #e5e5e5 2%, #eee 90%);
	display:inline;
	top:.2em;
	left:-.5em;
	padding:0.3em .5em;
}
.horizontal {
	background:#eee;
	overflow-x:auto;
	overflow-y:hidden;
	box-sizing:content-box;
	scrollbar-width: thin;
	transition: scrollbar-color 0.5s ease;	
	scrollbar-gutter: stable;
	scrollbar-color: rgba(0,0,0,0) rgba(0,0,0,0);		
	padding:2em;
	justify-content:start;
	height:100%;
	cursor:move;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.horizontal.flex {
	display:flex;	
	flex-flow:column wrap;
	grid-gap:2em;
}

.horizontal {
	display: grid;
	grid-template-rows: repeat(2,35vh);
	grid-gap: 3em;
	grid-auto-flow: column;
	padding-left:3rem;
}
.horizontal .image.tile {
	width:35vh;
}
.horizontal.lightbox{
	max-height:85vh;
}

.horizontal:hover {
	scrollbar-color: rgba(0,0,0,1) rgba(0,0,0,0);	
}



.horizontal .tile:nth-child(2n){
	-border:10px solid white;
}



.ui-tabs-nav {
	background:white;
	border-radius:0;
	border-bottom:1px solid black;
	box-sizing:content-box; 
	user-select:none;
}
.ui-tabs-tab.ui-state-default {
	background: white;
	border-color:#ccc;
	user-select:none;
}

.ui-tabs-tab.ui-tabs-active,
.ui-tabs-tab.ui-state-active {
	background: white;
	box-shadow: none;
	border-color:black;
	border-width: 1px;
	border:1px solid black;
	box-sizing:content-box !important;
	user-select:none;
}

.ui-tabs-tab span {
	color: black;
	user-select:none;
}

.circle {
	border-radius:100%;
	aspect-ratio:1/1;
	box-sizing:border-box;
}





.expandable {
	cursor:pointer;	
	transition:max-height 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
	padding-bottom:1em;
}
.expandable:hover {
	box-shadow: 0 0 0.5em 0 rgb(0,0,0,0.1);
}
.expandable::before{
	content:'';
	background:#ccc;
	width:100%;
	height:1px;
	bottom:0;
	position:absolute;
}
.expandable::after{
	content:'show less';
	position: absolute; 
	left: 0; 
	right: 0; 
	width:fit-content;
	padding:0.1em 0.5em;
	-border-radius:2em;
	-border:1px solid #ccc;
	margin-inline: auto; 
	display:inline-block;		
	background:#fff;
	line-height:1.5em;
	text-align:center;	
}
.expandable.closed::after {
	content:'show more';
}







/*
 * Parts of Skeleton V2.0.4 12/29/2014
/* -------- Media Query Resolutions -------- */
@media (min-width: 400px)  {}
@media (min-width: 700px)  {} /*menubar becomes active */
@media (min-width: 1000px) {}
@media (min-width: 1200px) {}
@media (-webkit-min-device-pixel-ratio: 2) {  /* Retina-specific */	
	html { 
		font-size: 190%;  
	}
	body {
		font-size: 1rem;
	}	
	p {
		font-size:1.8rem;
		line-height:2.3rem;
		margin:0;
	}
	ul li, 
	ol li {
		font-size:1.6rem;
		line-height: 1.3rem;
	}
}
/* MEDIAQUERY */
@media (min-width: 400px) {
	.form { line-height: 2; }
	.container { padding: 0; }
	.container, .ql-toolbar.sticky { width:90%; }
	.column, .columns { margin-left: 0%; margin-bottom:2%;}
	
	.ql-toolbar { width:100%; }
	.card input { width:100%;}

	.topbar {padding:1rem 4%;}
}
@media (min-width: 700px) {
	.container, .ql-toolbar.sticky { width:85%; }
	h1,h2,h3 {letter-spacing: -0.03em; }
	h4,h5,h6 {letter-spacing: -0.01em; }
	.topbar.inverted .logo {width:15rem; background:white;} 
	.ql-toolbar{ width:100%; }
	.topbar {padding:1rem 3rem;}
	.shorthero { max-height:40vh;}
	.flexhero > img, 
	.shorthero > img{ margin-top:-20%; }
	
}
@media (min-width: 1080px)  { /*desktop mode*/ 
	.horizontal {
		padding-left:25% !important;
		padding-right:25% !important;
	}
	.hero {margin:auto; max-width:1200px;}
	.form { line-height: 2.5; }
	.container { width: 90%; background:none;}
	.ql-toolbar.sticky {width:90%;}
	.column,.columns 		{ margin-left: 1%; margin-bottom: 1%;}
	.column:first-child,
	.columns:first-child	{ margin-left: 0; }
	.one.column,
	.one.columns			{ width: 7.4%; }
	.two.columns			{ width: 14.9%; }
	.three.columns			{ width: 26%; }
	.one-third.column,
	.four.columns			{ width: 30%; }
	.five.columns			{ width: 42%; }
	.one-half.column,
	.six.columns  			{ width: 49%;            }
	.seven.columns			{ width: 57%; }
	.two-thirds.column,
	.eight.columns			{ width: 64.3%; }
	.nine.columns			{ width: 74.0%;          }
	.ten.columns			{ width: 82.6666666667%; }
	.eleven.columns			{ width: 91.3333333333%; }
	.twelve.columns     	{ width: 100%;margin-left: 0; }
	.offset-by-one			{ margin-left: 8.66666666667%; }
	.offset-by-two			{ margin-left: 17.3333333333%; }
	.offset-by-three		{ margin-left: 26%;            }
	.offset-by-one-third,
	.offset-by-four			{ margin-left: 34.6666666667%; }
	.offset-by-five			{ margin-left: 43.3333333333%; }
	.offset-by-one-half,
	.offset-by-six			{ margin-left: 52%;            }
	.offset-by-seven		{ margin-left: 60.6666666667%; }
	.offset-by-two-thirds,
	.offset-by-eight		{ margin-left: 69.3333333333%; }
	.offset-by-nine			{ margin-left: 78.0%;          }
	.offset-by-ten			{ margin-left: 86.6666666667%; }
	.offset-by-eleven		{ margin-left: 95.3333333333%; }
	.topbar.inverted.jump { transition: unset;}
	.topbar { /*not inverted/*/
		font-size:1em; display:unset; height:unset;		
		pointer-events:none;
		padding-left:3.7rem;
		padding-right:4.5rem;
		padding-top:2rem;
		height:3em;
		--height:4em;
		background-size:100% 200%;
		background-position: left bottom;
		background-image:linear-gradient(to bottom,#fff 49%,rgba(0,0,0,0.1) 50%,  rgba(0,0,0,0) 100%);
		--transition: background-position 0.3s ease, top .5s ease, height .2s ease;
	}
	.topbar.inverted { 
		background-position:left top;
		--height:3em;
		--transition: background-position 0.3s ease, top .5s ease, height .1s ease;
	}
	.topcontainer {
		position: relative;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;	
		box-sizing: border-box; 
		height:auto;
	}
	.topbar.retracted:not(:focus-within):not(:hover) {top:-5.5em }
	.topbar.retracted:not(:focus-within):not(:hover) .menu {max-height:0 }
	.search input, .inverted .search input {box-shadow:none;min-width:0;}
	.dropdown:hover > a {background-position:left bottom;color:#000;}
	.dropdown:hover > ul {display:block;max-height:90vh;}
	.menu {position:absolute;}
	.topmenu div.dropdown { display:inline-block;padding:0;}
	.topbar .logo { margin-top:-2rem; }	
	.topbar .topmenu > * {display:inline-block;}
	.topbar .topmenu {width:100%;transition:width 0s;height:100%;}
	.topbar.open {display: unset; height:unset;}
	.topbar.open .topmenu {position:unset; margin-top:unset;width:unset; padding-top:unset; background:none !important;overflow:unset;}
	.topbar.open .topmenu > * {float:none;display:inline-block;clear:inherit;margin-bottom:inherit;}
	.topbar.open .topmenu > .search {margin-left: inherit;}
	.inverted .topmenu a.selected{ box-shadow:0px 0px 0px 1px rgba(0,0,0,0.4) inset; }
	.topbar .burger { display:none; height:inherit;}	

} /*end Media Query*/




.modal {
	position:fixed;
	background:rgba(0,0,0,0.5);
	top:0;
	bottom:0;
	right:0;
	left:0;
	z-index:9998;
	pointer-events:all;
}
.modal .window {
	position:fixed;
	top:6em;
	left:2em;
	right:2em;
	bottom:2em;
	height:80%;
	background:white;
	border-radius: 1em;
	z-index: 9999;
	box-shadow:0 1em 2em rgba(0,0,0,.2);
}

.modal .window .field {
	display:inline-block;
	width:5em;
	background: #eee;
	line-height:3em;
	text-align:right;
	padding: 0 1em;
	box-sizing:content-box;
}

.modal .window .content {
	display:block;
	padding:2rem;
	font-size:1.2em;
}

.modal .window pre {
	text-wrap: wrap;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
}

.closebutton {
	position:absolute;
	top:0;
	right:0;
	width:4em;
	height:4em;
	padding:1em;
	border:unset !important;
	background:#fff !important;
}
a.closebutton::after {
	content:"\00d7";
	font-weight:lighter;
	transition:background-color 0.5s ease, color 0.5s ease;
	background:#eee;
	width: 4rem;
	height:4rem;
	display:block;
	position:relative;
	text-align:center;
	font-size:3em;
	border-radius:50%;
	left:-1.5rem;
}

a.closebutton:hover::after {
	color:white !important;
	background:black;
}


.bottom.row {
	position:absolute;
	bottom:0;
	width:100%;
	padding:2em 0;
}



.container a.outline {
	position:relative;
	top:-0.15em;
	font-size:0.8em;
	font-weight:bold;
	color: #aaa;
	border: 4px solid #aaa;
	border-radius:0.4em;
	padding:0.05em 0.2em 0.1em 0.2em;	
	transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.container  a.outline:hover {
	background:#eee;
	color: #000;
	border-color: #000;
}


.toast::after {
	position:absolute;	
	line-height:2em;
	background:#f0f5f2;
	padding:0.5em 1em;
	vertical-align:middle;
	text-align:center;
	content:attr(message);
	transition: background-color 0.5s ease, opacity 0.5s ease, top 0.5s ease;
	top:0;
	opacity:0;
}

.toast.active::after {
	line-height:2em;
	transition: background-color 0.5s ease, opacity 0.5s ease, top 0.5s ease;
	top:-1em;
	opacity:1;
}