@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700|VT323|Megrim|Rajdhani");
*,*:after,*:before {
 margin:0;
 padding:0;
 -webkit-box-sizing:border-box;
 box-sizing:border-box
}
h1,
h2 {
 font-family:"Open Sans",sans-serif;
 text-align:center;
 margin:35px auto
}
h2 {
 margin-bottom:10px
}
p {
 line-height:1.4;
 margin:10px auto;
 max-width:700px;
 width:100%
}
h2 {
 text-transform:uppercase;
 font-size:2.1rem
}
body {
 color:#fdfdfd;
 font-family:"Open Sans",sans-serif;
 overflow-x:hidden
}
.wrap {
 max-width:1000px;
 width:100%;
 padding:25px 25px;
 margin:0 auto
}
.wrap p {
 margin-left:auto;
 margin-right:auto;
 text-align:center
}
.wrap img {
 margin:0 auto;
 position:relative;
 left:50%;
 -webkit-transform:translateX(-50%);
 transform:translateX(-50%);
 max-width:calc(100%);
 border:solid 5px #fdfdfd
}
.maxwidth {
 max-width:1000px;
 margin:0 auto
}
header {
 background-color:#21383a;
 padding:50px 25px
}
header h1 {
 font-size:6rem;
 margin-top:0;
}
header h1 span {
 color:#c1563d;
}
header p {
 max-width:600px;
 line-height:1.4;
 margin:25px auto;
 text-align:center;
}
header .actions {
 margin:35px 0;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 -ms-flex-wrap:wrap;
 flex-wrap:wrap;
}
.inputbtn {
 background-color:#d1aa09;
 color:#fdfdfd;
 font-size:1rem;
 padding:10px 10px
}
.btn {
 margin:15px;
 display:inline-block;
 padding:0px 25px;
 color:#fdfdfd;
 font-size:1.5rem;
 text-decoration:none;
 background-color:#d1aa09;
 font-family:"Open Sans",sans-serif;
 text-transform:uppercase;
 position:relative;
 z-index:10;
 border:0;
}
button {
 font-family: silkscreen;
}
.btn.small {
 margin:5px 0;
 font-size:1rem;
 font-family:"Open Sans",sans-serif
}
.btn:after {
 position:absolute;
 top:-5px;
 left:5px;
 background-color:#d1aa09;
 width:calc(100% - 10px);
 height:100%;
 content:"";
 z-index:-1
}
.btn:before {
 position:absolute;
 bottom:-5px;
 right:5px;
 background-color:#d1aa09;
 width:calc(100% - 10px);
 height:100%;
 content:"";
 z-index:-1
}
.btn.call {
 background-color:#c1563d
}
.btn.call:after,
.btn.call:before {
 background-color:#c1563d
}
.example,
.docs {
 background-color:rgba(209,170,9,0.5);
 color:#21383a
}
.working,
.links {
 background-color:#2a484a
}
.links .wrap {
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 -ms-flex-wrap:wrap;
 flex-wrap:wrap
}
.infoselects {
 width:100%
}
.infoselects p {
 text-align:left;
 margin-left:0
}
.infoselects button.btn {
 cursor:pointer
}
.colorpalette {
 margin-top:18px;
 margin-bottom:18px;
 text-transform:uppercase;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 -webkit-box-pack:start;
 -ms-flex-pack:start;
 justify-content:flex-start;
 -ms-flex-wrap:wrap;
 flex-wrap:wrap
}
.colorpalette .text {
 margin-right:15px;
 margin-bottom:10px;
 display:-webkit-inline-box;
 display:-ms-inline-flexbox;
 display:inline-flex;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 -webkit-box-pack:start;
 -ms-flex-pack:start;
 justify-content:flex-start;
 -ms-flex-wrap:wrap;
 flex-wrap:wrap;
 width:100%
}
.colorpalette .text button {
 margin-right:16px;
 margin-bottom:0px
}
.colorpalette .icons {
 display:-webkit-inline-box;
 display:-ms-inline-flexbox;
 display:inline-flex;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 -webkit-box-pack:start;
 -ms-flex-pack:start;
 justify-content:flex-start;
 -ms-flex-wrap:wrap;
 flex-wrap:wrap
}
.colorpalette .colorblock {
 margin-right:2px;
 margin-bottom:0px;
 margin-top:6px;
 height:25px;
 width:25px !important;
 border:solid 0px white
}
.colorpalette .ss-main {
 width:calc(100%);
 margin-top:8px;
 max-width:480px
}
.colorpalette .ss-main .ss-single-selected {
 display:-webkit-inline-box;
 display:-ms-inline-flexbox;
 display:inline-flex;
 width:calc(100%);
 background-color:#ececec
}
.colorpalette .ss-main .ss-option {
 margin-bottom:6px
}
.colorpalette .ss-main .ss-option:hover {
 background-color:rgba(0,0,0,0.1) !important
}
.colorpalette .ss-content {
 width:100%
}
.colorpalette .ss-content .ss-list .ss-option {
 padding:0px 10px
}
#custompalette {
 margin:12px 0;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-pack:start;
 -ms-flex-pack:start;
 justify-content:flex-start;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center
}
#custompalette input {
 margin-right:12px
}
#currentpallete {
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-pack:start;
 -ms-flex-pack:start;
 justify-content:flex-start;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center
}
.container canvas {
 margin:15px auto;
 position:relative;
 max-width:100%;
}
.selectors {
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-pack:start;
 -ms-flex-pack:start;
 justify-content:flex-start;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 -ms-flex-wrap:wrap;
 flex-wrap:wrap
}
.selectors label {
 display:-webkit-inline-box;
 display:-ms-inline-flexbox;
 display:inline-flex;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 -webkit-box-pack:start;
 -ms-flex-pack:start;
 justify-content:flex-start;
 margin:10px 0;
 margin-right:15px;
 text-transform:uppercase;
 -ms-flex-negative:1;
 flex-shrink:1;
 font-family: silkscreen;
}
#uploadimage {
    cursor: pointer;
}
.selectors label#uploadimage {
 width:100%;
}
.selectors label#uploadimage input {
 margin:5px 0;
 padding:3px;
 height: 50px;
 line-height: 50px;
}
@media (max-width: 550px) {
 .selectors label {
  width:calc(100%)
 }
}
.selectors label span {
 display:inline-block;
 width:40px;
 margin-left:5px;
 text-align:center
}
.selectors label input {
 margin-left:5px;
 padding:3px
}
.selectors label input[type="range"] {
 width:100px
}
.selectors label input[type="input"] {
 width: 75px;
}
.dothings {
 margin-top:15px
}
.dothings button {
 border:0;
 margin-top:10px;
 padding:5px 10px;
 text-transform:uppercase
}
.docs .wrap p {
 text-align:left;
 margin-left:0
}
.docs .wrap p.api {
 font-style:italic;
 padding-left:10px;
 margin-top:15px;
 line-height:1.2
}
.docs .wrap p.api strong {
 font-style:normal;
 font-weight:700
}
.docs .wrap pre {
 padding:10px;
 margin:10px 0;
 background-color:#e8f1f2;
 overflow-x:auto;
 white-space:pre-wrap;
 word-wrap:break-word
}
.docs .wrap h3 {
 font-size:1.8rem;
 margin-top:50px;
 font-family:"Open Sans",sans-serif
}
.loader {
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 height:100vh;
 width:100vw;
 display:none;
 -webkit-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 background-color:rgba(33,56,58,0.4)
}
.loader.active {
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex
}
.lds-spinner {
 color:official;
 display:inline-block;
 position:relative;
 width:64px;
 height:64px
}
.lds-spinner div {
 -webkit-transform-origin:32px 32px;
 transform-origin:32px 32px;
 -webkit-animation:lds-spinner 1.2s linear infinite;
 animation:lds-spinner 1.2s linear infinite
}
.lds-spinner div:after {
 content:" ";
 display:block;
 position:absolute;
 top:3px;
 left:29px;
 width:5px;
 height:14px;
 border-radius:20%;
 background:#fff
}
.lds-spinner div:nth-child(1) {
 -webkit-transform:rotate(0deg);
 transform:rotate(0deg);
 -webkit-animation-delay:-1.1s;
 animation-delay:-1.1s
}
.lds-spinner div:nth-child(2) {
 -webkit-transform:rotate(30deg);
 transform:rotate(30deg);
 -webkit-animation-delay:-1s;
 animation-delay:-1s
}
.lds-spinner div:nth-child(3) {
 -webkit-transform:rotate(60deg);
 transform:rotate(60deg);
 -webkit-animation-delay:-0.9s;
 animation-delay:-0.9s
}
.lds-spinner div:nth-child(4) {
 -webkit-transform:rotate(90deg);
 transform:rotate(90deg);
 -webkit-animation-delay:-0.8s;
 animation-delay:-0.8s
}
.lds-spinner div:nth-child(5) {
 -webkit-transform:rotate(120deg);
 transform:rotate(120deg);
 -webkit-animation-delay:-0.7s;
 animation-delay:-0.7s
}
.lds-spinner div:nth-child(6) {
 -webkit-transform:rotate(150deg);
 transform:rotate(150deg);
 -webkit-animation-delay:-0.6s;
 animation-delay:-0.6s
}
.lds-spinner div:nth-child(7) {
 -webkit-transform:rotate(180deg);
 transform:rotate(180deg);
 -webkit-animation-delay:-0.5s;
 animation-delay:-0.5s
}
.lds-spinner div:nth-child(8) {
 -webkit-transform:rotate(210deg);
 transform:rotate(210deg);
 -webkit-animation-delay:-0.4s;
 animation-delay:-0.4s
}
.lds-spinner div:nth-child(9) {
 -webkit-transform:rotate(240deg);
 transform:rotate(240deg);
 -webkit-animation-delay:-0.3s;
 animation-delay:-0.3s
}
.lds-spinner div:nth-child(10) {
 -webkit-transform:rotate(270deg);
 transform:rotate(270deg);
 -webkit-animation-delay:-0.2s;
 animation-delay:-0.2s
}
.lds-spinner div:nth-child(11) {
 -webkit-transform:rotate(300deg);
 transform:rotate(300deg);
 -webkit-animation-delay:-0.1s;
 animation-delay:-0.1s
}
.lds-spinner div:nth-child(12) {
 -webkit-transform:rotate(330deg);
 transform:rotate(330deg);
 -webkit-animation-delay:0s;
 animation-delay:0s
}
@-webkit-keyframes lds-spinner {
 0% {
  opacity:1
 }
 100% {
  opacity:0
 }
}
@keyframes lds-spinner {
 0% {
  opacity:1
 }
 100% {
  opacity:0
 }
}
.tip {
 margin-top:12px
}
.tip p {
 text-align:left;
 -webkit-box-pack:start;
 -ms-flex-pack:start;
 justify-content:flex-start;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 max-width:unset;
 margin-left:0;
 font-size:1rem;
 line-height:2
}
.tip a {
 display:-webkit-inline-box;
 display:-ms-inline-flexbox;
 display:inline-flex;
 margin-left:6px;
 margin-right:6px
}
.tip a img {
 border:0;
 max-width:unset;
 top:50%;
 -webkit-transform:unset;
 transform:unset;
 -webkit-transform:translateY(0.5rem);
 transform:translateY(0.5rem);
 left:unset;
 margin:0;
 height:2rem;
 -o-object-fit:contain;
 object-fit:contain
}