*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Merienda', cursive; }
li{ list-style: none; }
a, a:hover{ text-decoration: none; }
img{ margin: 0; padding: 0; display: block; max-width: 100%; width: auto; }
h1{ color: #fff; }
body{  background:url(../images/6a.png) no-repeat top center; background-size: cover; position: relative; }
.over-lay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5) }

*, *:before, *:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  background: whitesmoke;
  font-family: sans-serif;
}

.toolbar {    z-index: 9; width: 100%; text-align: center;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    padding: 15px;
    background-color: red;
    color: #fff;
}
.toolbar span{ margin-right: 15px; }
.picturepanel {
    text-align: center;
}
canvas {
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 535px;
    left: 9%;
    cursor: crosshair;
/*    width: 1115px;
    height: 870px;*/
}
.toolbar a, .toolbar div, .toolbar form{display: none;  }

#paint-app {
  margin-left: auto;
  margin-right: auto;

}


.placeholder {
  position:absolute;
  z-index:999;
}









@media only screen and (min-width: 768px) and (max-width: 1168px) {

}

@media only screen and (min-width: 768px) and (max-width: 999px) {

}

@media only screen and (min-width: 480px) and (max-width: 767px) {

}

@media only screen and (max-width: 479px) {
img{ height: auto; }
h1{ font-size: 14px;}
h1 img{ height: 30px; }
}