/*

* 2010-2020 Webkul.

*

* NOTICE OF LICENSE

*

* All right is reserved,

* Please go through this link for complete license : https://store.webkul.com/license.html

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade this module to newer

* versions in the future. If you wish to customize this module for your

* needs please refer to https://store.webkul.com/customisation-guidelines/ for more information.

*

*  @author    Webkul IN <support@webkul.com>

*  @copyright 2010-2020 Webkul IN

*  @license   https://store.webkul.com/license.html

*/



/* Animation */

@-webkit-keyframes

pulsate {  0% {

 -webkit-transform: scale(1);

 transform: scale(1);

 opacity: 0.8;

}

 45% {

 -webkit-transform: scale(1.75);

 transform: scale(1.75);

 opacity: 0;

}

}

@keyframes

pulsate {  0% {

 -webkit-transform: scale(1);

 transform: scale(1);

 opacity: 0.8;

}

 45% {

 -webkit-transform: scale(1.75);

 transform: scale(1.75);

 opacity: 0;

}

}



body { margin: 0; }



/* Hotspot */



#hotspotImg {

  background-color: #ededed;

  background-size: cover;

  background-position: center center;

  position: relative;

}



#hotspotImg .img-responsive-hotspot { max-width: 100%; }



#hotspotImg .hot-spot {

  position: absolute;

  width: 25px;

  height: 25px;

  top: 5px;

  left: 5px;

  text-align: center;

  /* background-color: rgba(229, 0, 137, 0.6); */

  color: #fff;

  border-radius: 100%;

  cursor: pointer;

  transition: all .3s ease;

}



#hotspotImg .hot-spot .circle {

  display: block;

  position: absolute;

  top: 45%;

  left: 45%;

  width: 2em;

  height: 2em;

  margin: -1em auto auto -1em;

  -webkit-transform-origin: 50% 50%;

  transform-origin: 50% 50%;

  border-radius: 50%;

  border: 1px solid #E5008A;

  opacity: 0;

  -webkit-animation: pulsate 3s ease-out infinite;

  animation: pulsate 3s ease-out infinite;

}



#hotspotImg .hot-spot .tooltip {

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    color: #fff;

    display: none;

    font-size: 14px;

    opacity: 1.0;

    left: 0px;

    position: absolute;

    text-align: left;

    top: 30px;

    z-index: 999;

    margin:-8px;

}



#hotspotImg .hot-spot .tooltip .img-row {

  padding: 10px;

  text-align: center;

}



#hotspotImg .hot-spot .tooltip .text-row { padding: 15px; }



#hotspotImg .hot-spot .tooltip h4 {

  margin-bottom: 10px;

  border-bottom: 1px solid #ffffff;

}



#hotspotImg .hot-spot .tooltip p {

  font-size: 14px;

  line-height: 1.4em;

  margin-bottom: 10px;

}



#hotspotImg .hot-spot .tooltip p:last-child { margin-bottom: 0; }







/* common css for the all the type of the look view */



.wk-grid-view-image-text a {

  color: white!important;

}



.wk-grid-view-image-text a:hover {

  color: #54b9cb!important;

}