/****************************************
  ==== RESETS
****************************************/

html,body,div,canvas { margin: 0; padding: 0; }
::-moz-selection { color: #333; text-shadow: none; }
::selection {  color: #333; text-shadow: none; }
.clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clear { display: inline-table; clear: both; }
/* Hides from IE-mac \*/ * html .clear { height: 1%; } .clear { display: block; } /* End hide from IE-mac */

/****************************************
  ==== LAYOUT
****************************************/

html, body { width: 100%; height: 100%; font-family: Helvetica, Verdana, Arial, sans-serif; background-color: #121212; }
body { }
/* div.logo { width: 204px; height: 38px; float: left; background: url(logo.png) 0 0 no-repeat; position: relative; z-index: 10; } */
div.title { height: 38px; line-height: 38px; padding: 0 10px; margin: 0 1px 0 0; float: right; color: #333; text-align: right; font-size: 18px; position: relative; z-index: 10; }
.template-wrap { position: absolute; top: 52%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.template-wrap canvas { margin: 0 0 10px 0; position: relative; z-index: 9; /* box-shadow: 0 10px 30px rgba(0,0,0,0.2); -moz-box-shadow: 0 10px 30px rgba(0,0,0,0.2); */ }
.fullscreen { display: none;  /* float: right; position: relative; z-index: 10; */ }

body.template { }
.template .template-wrap { }
.template .template-wrap canvas { }

div.logo {
    position: relative;
    z-index: 10;

    margin-bottom: 10px;

/*    float: right; */
    color: #76808d;
    font-size: 26px;
    text-align: center;
    text-transform: uppercase;
}

.template-wrap { width: 90%; }
.template-wrap canvas { width: 100%; }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .template-wrap {
        width: auto;
    }

    .template-wrap canvas {
        width: 720px;
        height: 405px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .template-wrap canvas {
        width: 912px;
        height: 513px;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .template-wrap canvas {
        width: 1120px;
        height: 630px;
    }
}

/* Very large devices (large desktops, 1900px and up) */
@media (min-width: 1900px) {
    .template-wrap canvas {
        width: 1600px;
        height: 900px;
    }
}