*{ 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/Background-.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) }*/
/*.custom-control-input:checked~.custom-control-label::before{ background: url(../images/check.png) no-repeat center center;     background-size: 60px; height: 70px; width: 70px;}
.custom-radio .custom-control-input:checked~.custom-control-label::after{ background-image: none; background-color: #000; height: 70px; width: 70px; border-radius: 50%; bottom: 20%; top: auto;     left: auto; right: 5%; z-index: -1; }
.custom-control-label::before{ width: 70px; height: 70px; top: auto; left: auto; bottom: 20%; right: 5%; }
*/
*, *:before, *:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  background: whitesmoke;
  font-family: sans-serif;
}

h2.position-absolute{ top: 25px; right: 25px; }
#paint-app .toolbar {
    z-index: 9;
    width: 20%;
    text-align: center;
    position: absolute;
    top: 63.5%;
    left: 16%;
    transform: translate(-50%,0);
    padding: 15px;
    background-color: red;
    color: #fff;
}

#paint-app .toolbar span{ margin-right: 15px; }
#paint-app .picturepanel {
    text-align: center;
}

#paint-app canvas {
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 345px;
    left: 7.5%;
    width: 520px;
    height: 658px;
}
#paint-app .toolbar a, #paint-app .toolbar div, #paint-app .toolbar form{display: none;  }

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

}




#paint-app-1 .toolbar {
    z-index: 9;
    width: 40%;
    text-align: center;
    position: absolute;
    top: 57.2%;
    left: 72%;
    transform: translate(-50%,0);
    padding: 15px;
    background-color: red;
    color: #fff;
}
#paint-app-1 .toolbar span{ margin-right: 15px; }
#paint-app-1 .picturepanel {
    text-align: center;
}

#paint-app-1 canvas {
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 352px;
    left: 46%;
    width: 623px;
    height: 605px;
}
#paint-app-1 .toolbar a, #paint-app-1 .toolbar div, #paint-app-1 .toolbar form{display: none;  }

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

}




#paint-app-2 .toolbar {
    z-index: 9;
    width: 40%;
    text-align: center;
    position: absolute;
    top: 96%;
    left: 30%;
    transform: translate(-50%,0);
    padding: 15px;
    background-color: red;
    color: #fff;
}
#paint-app-2 .toolbar span{ margin-right: 15px; }
#paint-app-2 .picturepanel {
    text-align: center;
}

#paint-app-2 canvas {
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 1085px;
    left: 7.5%;
    height: 513px;
    width: 664px;
}
.toolbar a, .toolbar div, .toolbar form{display: none;  }

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

}








#paint-app-3 .toolbar {
    z-index: 9;
    width: 36%;
    text-align: center;
    position: absolute;
    top: 57.5%;
    left: 82%;
    transform: translate(-50%,0);
    padding: 15px;
    background-color: red;
    color: #fff;
}
#paint-app-4 .toolbar {
    z-index: 9;
    width: 18%;
    text-align: center;
    position: absolute;
    top: 75%;
    left: 82%;
    transform: translate(-50%,0);
    padding: 15px;
    background-color: red;
    color: #fff;
}
#paint-app-5 .toolbar {
    z-index: 9;
    width: 18%;
    text-align: center;
    position: absolute;
    top: 67%;
    left: 22%;
    transform: translate(-50%,0);
    padding: 15px;
    background-color: red;
    color: #fff;
}
#paint-app-6 .toolbar {
    z-index: 9;
    width: 18%;
    text-align: center;
    position: absolute;
    top: 72%;
    left: 44%;
    transform: translate(-50%,0);
    padding: 15px;
    background-color: red;
    color: #fff;
}
#paint-app-7 .toolbar {
    z-index: 9;
    width: 18%;
    text-align: center;
    position: absolute;
    top: 89%;
    left: 22%;
    transform: translate(-50%,0);
    padding: 15px;
    background-color: red;
    color: #fff;
}
#paint-app-8 .toolbar {
    z-index: 9;
    width: 18%;
    text-align: center;
    position: absolute;
    top: 88%;
    left: 49%;
    transform: translate(-50%,0);
    padding: 15px;
    background-color: red;
    color: #fff;
}
#paint-app-9 .toolbar {
    z-index: 9;
    width: 18%;
    text-align: center;
    position: absolute;
    top: 70%;
    left: 65%;
    transform: translate(-50%,0);
    padding: 15px;
    background-color: red;
    color: #fff;
}
#paint-app-10 .toolbar {
    z-index: 9;
    width: 18%;
    text-align: center;
    position: absolute;
    top: 91%;
    left: 74%;
    transform: translate(-50%,0);
    padding: 15px;
    background-color: red;
    color: #fff;
}
#paint-app-3 .toolbar span{ margin-right: 15px; }
#paint-app-3 .picturepanel {
    text-align: center;
}

#paint-app-3 canvas {
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 695px;
    left: 76.9%;
}
#paint-app-3 .toolbar a, #paint-app-3 .toolbar div, #paint-app-3 .toolbar form{display: none;  }

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

}



#paint-app-4 canvas {
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 1064px;
    left: 75.5%;
    margin-left: auto;
    margin-right: auto;
    width: 185px;
    height: 210px;
}
#paint-app-5 canvas {
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 1030px;
    left: 57.5%;
    margin-left: auto;
    margin-right: auto;
    width: 175px;
    height: 168px;
}
#paint-app-6 canvas {
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 925px;
    left: 32%;
    margin-left: auto;
    margin-right: auto;
    /*width: 305px;
    height: 305px;*/
}
#paint-app-7 canvas {
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 855px;
    left: 15%;
    margin-left: auto;
    margin-right: auto;
    /*width: 185px;
    height: 275px;*/
}
#paint-app-8 canvas {
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 1270px;
    left: 16%;
    margin-left: auto;
    margin-right: auto;
    /*width: 165px;
    height: 255px;*/
}
#paint-app-9 canvas {
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 1375px;
    left: 40.50%;
    margin-left: auto;
    margin-right: auto;
    /*width: 237px;
    height: 130px;*/
}
#paint-app-10 canvas {
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 1380px;
    left: 65.5%;
    margin-left: auto;
    margin-right: auto;
    width: 168px;
    height: 177px;
}
/* For any shape tools that need a live preview */
.placeholder {
  position:absolute;
  z-index:999;
}





/*
.img-section {
    background: url(../images/bg.png) no-repeat center center;
    background-size: cover;
    
    vertical-align: middle;
    
    height: 405px;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 30px 20px;
    
}
#form1{top: 22.5%; left: 14%;  height: 405px;   position: absolute; width: 31.3%;}

#imgInp-1,#imgInp{ opacity: 0; }

#exampleInputEmail1{ background:url(../images/text.png) no-repeat center center; background-size: cover; border:0; text-indent: 15px; }
.form-group label{ font-size: 24px; }

h2.post {
    color: #000;
    font-size: 24px;
    z-index: 0;
    position: absolute;
    top: 65%;
}

h2.post-1{top: 60%;}
img#blah, img#blah-1 {
    z-index: 1;
    color: transparent;
}*/


@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; }
}