*{ 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-color: #c7eafb;}*/
body {
    background: url(../../bg-img/background-bg.png) no-repeat center center;
    background-size: cover;
}

/*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;

}

h2.position-absolute{ right: 25px; top: 25px; }

img#blah, img#blah-1 {

    z-index: 1;

    color: transparent;

    max-height: 350px;

}

html {

  box-sizing: border-box;

  background: whitesmoke;

  font-family: sans-serif;

}

#paint-app .toolbar {

    z-index: 9;

    width: 100%;

    text-align: center;

    position: fixed;

    bottom: 0;

    left: 0;

    transform: translate(0%,0);

    padding: 15px;

    background-color: red;

    color: #fff;

}

input{ text-transform: uppercase; }

/*input.type-text.type-text-2 {

    top: 55.8%;

    left: 53.5%;

}*/

.type-text {

    position: absolute;

    top: 40.4%;

    left: 14%;

    width: 90px;

    height: 90px;

    border-radius: 50%;

    text-align: center;

    border: 0;

    font-size: 54px;

    line-height: 90px;

    z-index: 999;

}

#paint-app .toolbar span{ margin-right: 15px; }

#paint-app .picturepanel {

    text-align: center;

}

#paint-app canvas {

    background: transparent;

    position: absolute;

    z-index: 0;

    top: 0;

    left: 0;

    width: 1349px;

    height: 1565px;

}

#paint-app .toolbar a, #paint-app .toolbar div, #paint-app .toolbar form{display: none;  }



#paint-app {

  margin-left: auto;

  margin-right: auto;



}



input.type-text.type-text-1 {

    right: 12.5%;

    left: auto;

    top: 20.9%;

}

input.type-text.type-text-2 {

    right: 36.85%;

    left: auto;

    top: 33.3%;

}

input.type-text.type-text-3 {

    right: 9.85%;

    left: auto;

    top: 41.5%;

}

input.type-text.type-text-4 {

    right: 12.3%;

    left: auto;

    top: 85.9%;

}

input.type-text.type-text-5 {

    right: auto;

    left: 29%;

    top: 61%;

}

input.type-text.type-text-6 {

    top: 85.5%;

    left: 49.3%;

}

input.type-text.type-text-7 {

    top: 89%;

    left: 20.75%;

}

input.type-text.type-text-8 {

    top: 62.8%;

    left: 59.6%;

}

#paint-app-1 .toolbar {

    z-index: 9;

    width: 10%;

    text-align: center;

    position: absolute;

    top: 40.2%;

    left: 45.5%;

    transform: translate(-50%,0);

    padding: 3px;

    background-color: red;

    color: #fff;

}

#paint-app-1 .toolbar span{ margin-right: 15px; }

#paint-app-1 .picturepanel {

    text-align: center;

}

/*input.type-text.type-text-1 {

    left: 86.1%;

    top: 33%;

}

*/

canvas{    cursor: crosshair;}

#paint-app-1 canvas {

    background: transparent;

    position: absolute;

    z-index: 2;

    top: 406px;

    left: 34%;

    width: 342px;

    height: 270px;

}

#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: 20%;

    text-align: center;

    position: absolute;

    left: 75%;

    transform: translate(-50%,0);

    padding: 15px;

    background-color: red;

    color: #fff;

    top: 51.9%;

}

#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: 0;

    top: 488px;

    left: 51%;

    width: 446px;

    height: 395px;

}

.toolbar a, .toolbar div, .toolbar form{display: none;  }



#paint-app-2 {

  margin-left: auto;

  margin-right: auto;



}









/*input.type-text.type-text-3 {

    top: 62.4%;

    left: 68.97%;

}



input.type-text.type-text-4 {

    top: 80%;

    left: 87.2%;

    z-index: 999999;

}

input.type-text.type-text-5 {

    top: 68%;

    left: 29%;

    z-index: 999999;

}

input.type-text.type-text-6 {

    top: 89.4%;

    left: 58%;

    z-index: 999999;

}

input.type-text.type-text-7 {

    top: 89%;

    left: 33%;

    z-index: 999999;

}*/

#paint-app-3 .toolbar {

    z-index: 9;

    width: 20%;

    text-align: center;

    position: absolute;

    top: 68%;

    left: 45%;

    transform: translate(-50%,0);

    padding: 15px;

    background-color: red;

    color: #fff;

}

#paint-app-4 .toolbar {

    z-index: 9;

    width: 14%;

    text-align: center;

    position: absolute;

    top: 77%;

    left: 90%;

    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: 63%;

    left: 18%;

    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: 81%;

    left: 47%;

    transform: translate(-50%,0);

    padding: 4px;

    background-color: red;

    color: #fff;

}

#paint-app-7 .toolbar {

    z-index: 9;

    width: 18%;

    text-align: center;

    position: absolute;

    top: 86%;

    left: 11%;

    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: 61.5%;

    left: 48%;

    transform: translate(-50%,0);

    padding: 5px;

    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: 826px;

    left: 23.5%;

    width: 436px;

    height: 338px;

}

#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: 1102px;

    left: 61.5%;

    margin-left: auto;

    margin-right: auto;

    width: 357px;

    height: 355px;

}

#paint-app-5 canvas {

    background: transparent;

    position: absolute;

    top: 861px;

    left: 11%;

    margin-left: auto;

    margin-right: auto;

    width: 225px;

    z-index: 0;

    height: 213px;

}

#paint-app-6 canvas {

    background: transparent;

    position: absolute;

    z-index: 2;

    top: 1123px;

    left: 41.4%;

    margin-left: auto;

    margin-right: auto;

    width: 322px;

    height: 319px;

}

#paint-app-7 canvas {

    background: transparent;

    position: absolute;

    z-index: 2;

    top: 1176px;

    left: 10%;

    margin-left: auto;

    margin-right: auto;

    width: 380px;

    height: 297px;

}

#paint-app-8 canvas {

    background: transparent;

    position: absolute;

    z-index: 2;

    top: 757px;

    left: 39.5%;

    margin-left: auto;

    margin-right: auto;

    width: 314px;

    height: 294px;

}

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

}