body{
background-color: #222;
color: #aaa;
transition: color 1s, background-color 1s;
}

a{
color: #ddd;
}

a:hover, a:focus{
color: #fff;
}

hr{
border: 0;
border-top: 2px solid #555;
}

textarea{
border: 0;
background: transparent;
margin: 0;
padding: 0;
display: block;
overflow: auto;
resize: none;
width: 100%;
outline: none;
}

#h1{
box-sizing: border-box;
padding: 1em 0 0.6em 0;
color: #ccc;
transition: color 1s;
}

#h1, #hidden{
font-size: 6em;
margin: 0;
font-weight: 700;
line-height: 1.1;
font-family: 'Montserrat', helvetica, arial, sans-serif;
}

#hidden{
white-space: nowrap;
float: left;
opacity: 0;
margin-top: 2em;
}

#h2{
font-size: 2.5em;
box-sizing: border-box;
margin: 0;
padding: 0 0 1.5em 0;
font-weight: normal;
line-height: 1.2;
font-style: oblique;
font-family: 'Lora', Georgia, times, serif;
color: #bbb;
transition: color 1s;
}

#content{
font-size: 1.25em;
font-weight: normal;
line-height: 1.6;
font-family: 'Hind Madurai', helvetica, arial, sans-serif;
font-weight: 300;
}

.controls{
background-color: #111;
width: 13%;
float: left;
position: relative;
z-index: 1;
transition: color 1s;
}

.controls.active{
z-index: 2010;
}

.col-md-offset-1{
margin-left: 6%;
}

.row{
overflow: hidden;
}

.font-progress i {
    -webkit-animation: glyphicon-spin-r 1s infinite linear;
    animation: glyphicon-spin-r 1s infinite linear;
}

#toolbar{
margin-top: 5em;
}

.btn-default{
background-color: #666;
color: #fff;
border: 0;
border-radius: 2em;
padding: 0.5em 2em;
cursor: pointer;
}

.btn-circle {
display: inline-block;
width: 2.5em;
height: 2.4em;
position: relative;
margin-right: 0.5em;
text-align: center;
padding: 0;
line-height: 2.5em;
border-radius: 2.5em;
background: #666;
border: 0;
cursor: pointer;
}

.btn-circle i{
margin-top: 0.65em;
}

#slide{
margin-left: 1em;
}

#toolbar .slider-track{
height: 3px;
background: #666;
margin-top: -2px;
}

#toolbar .slider-handle{
	background: #ccc;
}

.slider.slider-horizontal .slider-selection, .slider.slider-horizontal .slider-track-low, .slider.slider-horizontal .slider-track-high{
display: none;
}

#title-controls{
box-sizing: border-box;
padding-top: 12%;
}

.btn.lock{
background: transparent url(img/lock.svg) no-repeat;
background-position: 50%;
background-size:  1.3em;
margin-right: 0.1em;
}

.btn.edit{
background: transparent url(img/edit.svg) no-repeat;
background-position: 50%;
background-size:  1.3em;
}

.btn.lock, .btn.edit{
float: right;
margin-top: 0.5em;
margin-right: 0.9em;
}

.btn.lock:hover, .btn.edit:hover{
background-color: #666;
}

.btn.lock.active{
background-image: url(img/locked.svg);
}

.btn.edit.active{
background-image: url(img/cancel.svg);
}

.label{
font-size: 0.9em;
font-weight: normal;
display: block;
text-align: right;
color: #666;
padding-right: 1.5em;
padding-top: 0.5em;
}

.btn-circle.active{
background-color: #777;
}


.footer{
margin-top: 5em;
}

.footer hr{
margin-bottom: 3em;
}

.footer a{
float: left;
margin-right: 2em;
margin-bottom: 1em;
}

#list{
display: block;
position: absolute;
top: 0;
left: -9999999px;
background-color: #111;
min-height: 100vh;
z-index: 2000;
box-sizing: border-box;
width: 100%;
overflow: hidden;
opacity: 0;
transition: opacity 0.5s;
padding-right: 5%;
}

#list.active{
left: 0;
opacity: 0.92;
}

#list h2{
display: block;
float: left;
width: 100%;
clear:  both;
margin: 2em 0 1em 0;
padding: 0;
}

#list .item{
float: left;
width: 3em;
height: 3em;
position: relative;
text-align: center;
cursor: pointer;
}

#list .item canvas{
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: 2001;
}

#list .item:hover canvas{
width: 140%;
height: 140%;
margin-left: -20%;
margin-top: -20%;
}

#list .item .font-name{
display: inline-block;
width: auto;
padding: 0.3em 0.9em;
background-color: #333;
color: #ddd;
white-space: nowrap;
position: relative;
z-index: 2002;
margin-left: -2px;
visibility: hidden;
}

#list .item:hover .font-name{
visibility: visible;
}

#search{
padding: 0.5em 1em;
font-family: 'Hind Madurai', helvetica, arial, sans-serif;
font-weight: 300;
font-size: 1.2em;
line-height: 1.5;
width: 30em;
margin-bottom: 1em;
border: 2px solid #666;
color: #999;
background: transparent;
}

/* light color scheme */
body.active{
background-color: #eee;
color: #444;
}

body.active .controls{
background-color: #ddd;
color: #222;
}

body.active #toolbar .slider-handle{
background: #333;
}

body.active #h1{
color: #111;
}

body.active #h2{
color: #222;
}

body.active .edit, body.active .lock{
background-color: #666;
}

body.active .edit:hover, body.active .lock:hover{
background-color: #999;
}

body.active .controls.active{
background-color: #222;
}

body.active #list{
color: #eee;
}

body.active .footer a, body.active .controls .label{
color: #222;
}

body.active .footer a:hover, body.active .controls .label:hover{
color: #666;
}

body.active .controls.active .label{
color: #999;
}

body.active .controls.active .label:hover{
color: #aaa;
}

#spinner{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000 url(img/spinner.svg) no-repeat;
background-position: 50% 50%;
opacity: 1;
transition: opacity 0.5s;
z-index: 100;
}

#spinner.active{
opacity: 0;
}

@-webkit-keyframes glyphicon-spin-r {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes glyphicon-spin-r {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@media only screen and (max-width: 1024px)  {
.controls .label{
display: none;
}

#search{
width: 95%;
}

.controls .btn{
margin-top: 0;
}

body.active .controls{
background-color: #222;
}

body.active .controls.active{
background-color: #111;
}

body.active .controls .btn{
background-color: transparent;
}
}

@media only screen and (max-width: 968px)  {
#h2{
font-size: 2em;
}
.tooltip-main{
filter: alpha(opacity=90);
opacity: .9;
}

#slide {
    margin-left: 3em;
}
}

@media only screen and (max-width: 480px)  {
#h2{
font-size: 1.8em;
}
}

@media only screen and (max-width: 630px)  {
.controls .btn{
margin-right: 0;
}
#slide{
margin: 2.5em 0 0 0;
width: 100%;
}
}

@media only screen and (max-width: 480px)  {
.controls, body.active .controls{
padding-right: 0;
background: transparent;
}

#toolbar{
margin-top: 3em;
}

#content{
font-size: 1em;
}

#h2{
font-size: 1.4em;
}

body.active .controls .btn{
filter: invert(60%);
}

body.active .controls.active{
background: transparent;
}

body.active .controls.active .btn{
filter: invert(10%);
}
}