*{ 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, h4{ color: #ed3237; }

body {
    background: url(../../bg-img/background-bg.png) no-repeat center center;
    background-size: cover;
}

.toys-banner{position: relative;}

form{ position: absolute;}

.toys-pos {

    top: 14%;

    left: 10%;

}

div#dvSource {

    position: relative;

    z-index: 9999;

}

.draggable1{ max-height: 100px;  }

.draggable111{position: absolute !important; top: 0; left: 0;}

.opacity-0{ opacity: 0; height: 150px; }

/*#dvSource{ display: inline-block; width: 49%; }*/

img.ui-droppable-disabled    {

padding: 0;

}

div.dvdest-1 {

    position: absolute;

    top: 24%;

    left: 7.5%;

    width: 135px;

    height: 120px;

}

img.ppos {

    position: absolute;

    top: -25px;

    right: -5px;

}

.draggable{ animation: none !important; }

div.dvdest-2 {

    position: absolute;

    top: 48%;

    left: 7.5%;

    width: 135px;

    height: 120px;

}

div.dvdest-3 {

    position: absolute;

    top: 74.5%;

    left: 7.5%;

    width: 135px;

    height: 120px;

}





div.dvdest-4 {

    position: absolute;

    top: 71.5%;

    right: 7.5%;

    width: 135px;

    height: 120px;

}

div.dvdest-5 {

    position: absolute;

    top: 48.5%;

    right: 7.5%;

    width: 135px;

    height: 120px;

}

div.dvdest-6 {

    position: absolute;

    top: 25.5%;

    right: 7.5%;

    width: 135px;

    height: 120px;

}

div.dvdest-7 {

    position: absolute;

    top: 4%;

    right: 13.5%;

    width: 135px;

    height: 120px;

}

div.dvdest-8 {

    position: absolute;

    top: 4%;

    right: 32.5%;

    width: 135px;

    height: 120px;

}

img.ppos-1 {

    position: absolute;

    top: -25px;

    left: -5px;

}

.hen {

    left: 30%;

    top: 61.5%;

}

.hen img{ height: 70px; }

.pig {

    left: 70%;

    top: 55%;

}

.goat {

    top: 71%;

    left: 22%;

}

.donky {

    top: 56%;

    left: 23.5%;

}

.cow {

    top: 52%;

    left: 40.5%;

}

.duck {

    top: 81%;

    left: 33.5%;

}

.sheep {

    top: 82%;

    left: 58.5%;

}

.hourse {

    top: 71%;

    left: 67.5%;

}

.cow img{ height: 70px; }

#dvSource{ position: absolute !important; width: auto !important;}

.ui-draggable.ui-draggable-dargging{ opacity: 1 !important; }

/*.darg-img{ position: absolute; top: 0; left:0; }*/



#dvSource .position-relative {

    display: inline-block;

}

.dvdest-1-img {

    height: 74px;

    width: 70px;

    padding: 5px;

}

.dvdest-1-img {

    width: 100%;

    height: 100%;

}



.custom-checkbox .custom-control-label::before {

    border-radius: .25rem;

    background-color: #007bff;

}



.custom-control-label::after {

    position: absolute;

    top: .25rem;

    left: -1.5rem;

    display: block;

    width: 50px;

    height: 50px;

    content: "";

    background: no-repeat 50%/50% 50%;

}

.custom-control-label::before {

    position: absolute;

    top: .25rem;

    left: -1.5rem;

    display: block;

    width: 50px;

    height: 50px;

    pointer-events: none;

    content: "";

    background-color: #fff;

    border: #adb5bd solid 1px;

    border-radius: 0% !important;

}





.ping {

    -webkit-animation: ping 0.8s ease-in-out infinite both;

            animation: ping 0.8s ease-in-out infinite both;

}

/* ----------------------------------------------

 * Generated by Animista on 2020-1-11 14:5:2

 * Licensed under FreeBSD License.

 * See http://animista.net/license for more info. 

 * w: http://animista.net, t: @cssanimista

 * ---------------------------------------------- */



/**

 * ----------------------------------------

 * animation ping

 * ----------------------------------------

 */

@-webkit-keyframes ping {

  0% {

    -webkit-transform: scale(0.2);

            transform: scale(0.2);

    opacity: 0.8;

  }

  80% {

    -webkit-transform: scale(1.2);

            transform: scale(1.2);

    opacity: 0;

  }

  100% {

    -webkit-transform: scale(2.2);

            transform: scale(2.2);

    opacity: 0;

  }

}

@keyframes ping {

  0% {

    -webkit-transform: scale(0.2);

            transform: scale(0.2);

    opacity: 0.8;

  }

  80% {

    -webkit-transform: scale(1.2);

            transform: scale(1.2);

    opacity: 0;

  }

  100% {

    -webkit-transform: scale(2.2);

            transform: scale(2.2);

    opacity: 0;

  }

}













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

/*.custom-control-label::after {

    position: absolute;

    top: .25rem;

    left: -1.5rem;

    display: block;

    width: 20px;

    height: 20px;

    content: "";

    background: no-repeat 50%/50% 50%;

}

.custom-control-label::before {

    position: absolute;

    top: .25rem;

    left: -1.5rem;

    display: block;

    width: 20px;

    height: 20px;

    pointer-events: none;

    content: "";

    background-color: #fff;

    border: #adb5bd solid 1px;

    border-radius: 0% !important;

}*/

}



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

/*.custom-control-label::after {

    position: absolute;

    top: .25rem;

    left: -1.5rem;

    display: block;

    width: 20px;

    height: 20px;

    content: "";

    background: no-repeat 50%/50% 50%;

}

.custom-control-label::before {

    position: absolute;

    top: .25rem;

    left: -1.5rem;

    display: block;

    width: 20px;

    height: 20px;

    pointer-events: none;

    content: "";

    background-color: #fff;

    border: #adb5bd solid 1px;

    border-radius: 0% !important;

}*/

}



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

/*.custom-control-label::after {

    position: absolute;

    top: .25rem;

    left: -1.5rem;

    display: block;

    width: 20px;

    height: 20px;

    content: "";

    background: no-repeat 50%/50% 50%;

}

.custom-control-label::before {

    position: absolute;

    top: .25rem;

    left: -1.5rem;

    display: block;

    width: 20px;

    height: 20px;

    pointer-events: none;

    content: "";

    background-color: #fff;

    border: #adb5bd solid 1px;

    border-radius: 0% !important;

}*/

}



@media only screen and (max-width: 479px) {

/*img{ height: auto; }

h1{ font-size: 14px;}

h1 img{ height: 30px; }



.custom-control-label::after {

    position: absolute;

    top: .25rem;

    left: -1.5rem;

    display: block;

    width: 20px;

    height: 20px;

    content: "";

    background: no-repeat 50%/50% 50%;

}

.custom-control-label::before {

    position: absolute;

    top: .25rem;

    left: -1.5rem;

    display: block;

    width: 20px;

    height: 20px;

    pointer-events: none;

    content: "";

    background-color: #fff;

    border: #adb5bd solid 1px;

    border-radius: 50% !important;

}

.toys-pos {

    top: 7%;

    left: 13%;

}

form.toys-pos.toys-pos-1 {

    left: 41.5%;

    top: 1%;

}

form.toys-pos.toys-pos-2 {

    left: 62.1%;

    top: 1.2%;

}

form.toys-pos.toys-pos-3 {

    top: 22%;

    left: 17.7%;

}

form.toys-pos.toys-pos-4  {

    top: 48%;

    left: 30.5%;

}

form.toys-pos.toys-pos-5 {

    top: 65%;

    left: 17.4%;

}

form.toys-pos.toys-pos-6 {

    top: 33%;

    left: 62.2%;

}

form.toys-pos.toys-pos-7 {

    top: 54%;

    left: 68.4%;

}

form.toys-pos.toys-pos-8 {

    top: 55%;

    left: 68.4%;

}

form.toys-pos.toys-pos-8 {

    top: 53%;

    left: 88.2%;

}*/

}