:root{
    --text-base: #f5f5f5;
    --link-base: #b5f;
    --link-hover: #94e;
    --link-active: #94e;
    --link-focus: #94e;
    --link-visited: #94e;
    --background-color: #f5f5f5;
    --horizontal-color: #555
}

* {
    box-sizing: inherit
}

html {
    box-sizing: border-box;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px
}

body {
    display: block;
    margin: 0;
    color: var(--text-base);
    background-color: #333;
}

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0
}

h1 {
    font-weight: 300
}

h2, h3 {
    font-weight: inherit
}

h1 {
    font-size: 3.5em
}

h2 {
    font-size: 1.8em
}

h3 {
    font-size: 1.3em
}

hr {
    height: 0;
    overflow: visible;
    border: 1px solid var(--horizontal-color);
    border-width: 1px 0 0 0
}

pre {
    font-family: monospace;
    font-size: 1em
}

a, a:hover, a:visited a:focus {
    border: 0;
    text-decoration: none;
    color: var(--link-base)
}

a:visited {
    color: var(--link-visited)
}

a:focus {
    color: var(--link-focus)
}

a:active {
    color: var(--link-active)
}

a:hover {
    text-decoration: underline;
    color: var(--link-hover)
}

h1 > a{
    color: var( --text-base )
}
h1 > a:hover{
    text-decoration: none
}

code, kbd, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    display: block;
    border-style: none;
    width: 100%
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

textarea {
    width: 100%
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

button, [type="button"], [type="reset"], [type="submit"] {
    appearance: button;
    -webkit-appearance: button
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

pre{
    border: 1px solid #ddd;
    border-radius:2px;
    overflow:auto;
    max-height:30em;
    font-size:.8em
}

[type="checkbox"], [type="radio"] {
    padding: 0
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    appearance: textfield;
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

.center {
    text-align: center
}

.container {
    position: relative;
    max-width: 800px;
    margin: auto;
    padding-left: 20px;
    padding-right: 20px
}

.display-1, .display-2 {
    font-weight: 300
}

.display-1 {
    font-size: 2.3em
}

.display-2 {
    font-size: 1.5em
}

.w-100{width:100%}
.w-50{width:50%}

.h-100{height:100%}
.h-50{height:50%}

.p-0 {padding: 0}
.p-1 {padding: .25em}
.p-2 {padding: .5em}
.p-3 {padding: .95em}
.p-4 {padding: 1.7em}
.p-5 {padding: 2.5em}
.p-6 {padding: 5.25em}

.ph-1 {
    padding-left: .25em;
    padding-right: .25em
}
.ph-2 {
    padding-left: .5em;
    padding-right: .5em
}
.ph-3 {
    padding-left: .95em;
    padding-right: .95em
}
.ph-4 {
    padding-left: 1.7em;
    padding-right: 1.7em
}
.ph-5 {
    padding-left: 2.5em;
    padding-right: 2.5em
}
.ph-6 {
    padding-left: 5.25em;
    padding-right: 5.25em
}

.m-0 {margin: 0}
.m-1 {margin: .25em}
.m-2 {margin: .5em}
.m-3 {margin: .95em}
.m-4 {margin: 1.7em}
.m-5 {margin: 2.5em}
.m-6 {margin: 5.25em}

.ml-0 {margin-left: 0}
.ml-1 {margin-left: .25em}
.ml-2 {margin-left: .5em}
.ml-3 {margin-left: .95em}
.ml-4 {margin-left: 1.7em}
.ml-5 {margin-left: 2.5em}
.ml-6 {margin-left: 5.25em}

.mr-0 {margin-right: 0}
.mr-1 {margin-right: .25em}
.mr-2 {margin-right: .5em}
.mr-3 {margin-right: .95em}
.mr-4 {margin-right: 1.7em}
.mr-5 {margin-right: 2.5em}
.mr-6 {margin-right: 5.25em}

.browserupgrade{
    background-color: #ffc;
    padding: 1em;
    font-size: 1.1em;
    margin: 0;
    border-bottom: 1px solid #dd7
}

#dropZone{
    position: fixed;
    opacity: 0;
    border: 1px solid #f00;
    pointer-events: none;
    z-index: 99999
}

#dropZone.active{
    pointer-events: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid #f00;
    background-color: rgba( 0,0,255,.4 )
}

.thumbnail{
    position: relative;
    margin: auto;
    display: inline-block;
    background: linear-gradient( #2b2b2b 0%, #272727 100% );
    padding: .8em;
    border-radius: 8px;
    border: 1px solid #000;
    border-color: #252525 transparent #484848
}
.thumbnail img{
    display: block;
    position: relative;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 280px;
    margin: auto;
    box-shadow: 2px 2px 4px -2px rgba(0,0,0,.8)
}

.downloadBtn{
    background-color: #222;
    border-radius: 4px;
    padding: 1em;
    display: block;
    text-align: center;
    margin: auto;
    max-width: 160px;
    font-weight: 900
}
.downloadBtn:hover{
    background-color: #252525;
}

.btn{
    cursor: pointer;
	border-radius: 4px;
    padding: .6em .8em;
	background-color: #222;
	font-weight: 900;
	color: #d9f
}
.btn:hover{
    background-color: #252525;
}

li{
    list-style: none
}

#progressBar{
    border: 1px solid #000;
    border-color: #111 #000 #484848 #000;
    border-width: 1px 0;
    background: linear-gradient( #2a2a2a 0%, #252525 100% );
    border-radius: 40px;
    padding: 4px 7px 5px 7px;
    overflow: hidden;
    display: none;
}
#progressBar .outer{
    height: 16px;
    min-width: 16px;
    transition: width .2s;
    border-radius: 40px;
    background-color: #2e2;
    background-image: linear-gradient( 135deg,rgba(0,0,0,.2) 25%, transparent 25% 50%,rgba(0,0,0,.2) 50% 75%,transparent 75% 100% ),
                      linear-gradient( 0deg, rgba( 0,0,0,.85 ), transparent );
    background-size: 35px 35px;
    border: 1px solid transparent;
    border-color: #4f4 transparent #090;
    width: 0%
}

@media (max-width:800px) {
    :root{
        font-size: .9rem;
    }
}

@media (max-width:640px) {
    :root {
        font-size: .8em;
    }
}