#robot{
        position:absolute !important;
         top: 15%;
         left: 5%;
         background: url(../images/beaker.png);
         background-size: contain !important;
  
    width: 20%;
    height: 20%;
    background-repeat: no-repeat !important;
         }
         #ufo{
         position:absolute !important;
         top: 15%;
          background: url(../images/triangle.png);
         left: 45%;
         background-size: contain !important;
   
    width: 20%;
    height: 20%;
    background-repeat: no-repeat !important;
         }
         #rubic{
        position:absolute !important;
         background-size: contain !important;
    position:absolute !important;
   width: 10%;
    height: 10%;
    background-repeat: no-repeat !important;
         top: 50%;
         left: 85%;
         }
         #chemical{
        position:absolute !important;
         top:75%;
         left:36%;
          background: url(../images/multiplication.png);
          background-size: contain !important;
   
    width: 20%;
    height: 20%;
    background-repeat: no-repeat !important;
         }
         
         #calculator{
              background: url(../images/bond.png);
         top:10%;
         left: 75%;
         position:absolute !important;
         background-size: contain !important;
    position:absolute !important;
    width: 20%;
    height: 20%;
    background-repeat: no-repeat !important;
         }
         #brain{
         position:absolute !important;
         top: 93%;
         left: 77%;
         background-size: contain !important;
  
    width: 10%;
    height: 10%;
    background-repeat: no-repeat !important;
         }
         select.form-control {
         border-radius: 15px;
         }
         #cubic{
         position: absolute;
         top: 65%;
         }
 .sonar-wrapper {
    display:none;
    position: absolute;
    z-index: 0;
    top: 35%;
    padding: 100px;
    overflow: hidden;
    left: 40%;
}

.sonar-emitter {
      position: relative;
    margin: 0px;
    width: 100px;
    height: 100px;
    border-radius: 9999px;
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}

.sonar-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
.sonar-wave {
  animation: sonarWave 2s linear infinite;
}

@keyframes sonarWave {
  from {
    opacity: 0.4;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}

.pinkBg {
  background-color: #ed184f;
  background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
}
.intro-banner-vdo-play-btn {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  margin: -50px 0 0 -30px;
  border-radius: 100px;
  z-index: 1;
}
.intro-banner-vdo-play-btn i {
  line-height: 56px;
  font-size: 30px;
}
.intro-banner-vdo-play-btn .ripple {
  position: absolute;
  width: 160px;
  height: 160px;
  z-index: -1;
  left: 50%;
  top: 50%;
  opacity: 0;
  margin: -80px 0 0 -80px;
  border-radius: 100px;
  -webkit-animation: ripple 1.8s infinite;
  animation: ripple 1.8s infinite;
}

@-webkit-keyframes ripple {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes ripple {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.intro-banner-vdo-play-btn .ripple:nth-child(2) {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}
.intro-banner-vdo-play-btn .ripple:nth-child(3) {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}