@font-face {
    font-family:'Vida32Pro-Regular';
    src: url('/fonts/Vida32Pro_gdi.eot');
    src: url('/fonts/Vida32Pro_gdi.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Vida32Pro_gdi.woff') format('woff'),
        url('/fonts/Vida32Pro_gdi.ttf') format('truetype'),
        url('/fonts/Vida32Pro_gdi.otf') format('opentype'),
        url('/fonts/Vida32Pro_gdi.svg#Vida32Pro-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-25CA;
}

body { background: #000; overflow: hidden; font: 14px/1.3 'Vida32Pro-Regular', sans-serif; color: #7b7572; }

#head { position: fixed; width: 100%; height: 68px; text-align: center; background: rgba(0,0,0,0.8); -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.9); -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.9); box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.9); transition: background 0.9s; color: #7b7572; letter-spacing: 4px; }
#head:hover { background: rgba(0,0,0,0.95); }
    #head h1 { position: relative; margin: 0 40px; height: 68px; font-size: 12px; font-weight: normal; vertical-align: bottom; }
    #head a { text-decoration: none; color: inherit; transition: color 0.9s;}
    #head a span { color: #e1ebf1; }
    #head a:hover { transition: color 0.4s; }
    #head a:hover, #head a:hover span { color: #fff; }

    #head a.logo { transition: opacity 0.9s; line-height: 58px; text-decoration: none; border: 0; }
    #head a.logo:hover { opacity: 0.85; transition: opacity 0.4s; }
    #head img { height: 46px; /*70%*;*/ width: auto; vertical-align: bottom; text-decoration: none; border: 0; }

    .fr { float: right; }
    span.fr { position: absolute; right: 0; bottom: 13px; }
    .fl { float: left; }
    a.fl { text-transform: uppercase; position: absolute; left: 0; bottom: 13px; }

#fb { position: fixed; left: 40px; top: 110px; width: 50px; height: 50px; transition: opacity 0.9s; background: url('/images/facebook.png') no-repeat; opacity: 0.7; }
#fb:hover { opacity: 1; }

.controls { display: block; background: #7b7572; color: #fff; font-size: 35px; text-align: center; width: 50px; height: 50px; line-height: 42px; position: fixed; top: 110px; right: 40px; cursor: pointer; opacity: 0.7; }
.controls.minus { top: 175px; }
.controls:hover { opacity: 1; }

#myCanvas { width: 4000px; height: 4000px; }

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                  not supported by any browser */
}


@media (max-width:800px){

    h1 .fr, h1 .fl { display: none; }

    #fb { left: 20px; top: 90px; width: 35px; height: 35px; background-size: cover; }
    .controls { font-size: 25px; width: 35px; height: 35px; line-height: 30px; top: 90px; right: 20px; }
    .controls.minus { top: 135px; }

}