/*-------------------------------------
HOTSPOTS
--------------------------------------*/

.modalHotspot {
    cursor: pointer;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}
.modalHotspot:after {
  content:'';
  display:block;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  margin:0;
  padding:0;
}

.DesktopLink,
.MobileLink{ 
  display: block;
  width: 100%; 
  position: absolute; 
  height: 100%; 
  margin: 0; 
  padding: 0; 
  top: 0;
}

/*----------media queries---up to mobile------*/
@media only screen and (max-width : 737px) {
.DesktopLink{ display: none !important;}
}
@media only screen and (min-width : 737px) {
.MobileLink{display: none !important;}
}

/*----------------------
MODAL STYLING
---------------------*/

#modal_outer.singleBuyModal{
	-webkit-transform: translate(-50%, -50%) !important;
    -moz-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
	transform: translate(-50%, -50%) !important;
    left: 50% !important;
    top: 50% !important;
    height: auto !important;
	margin: 0 auto !important;
	width: 100% !important;
}

#modal_outer #modal_container{
	position: relative;
    border: none !important;
    border-radius: 0 0 0 0 !important;
    box-shadow: 0 0 0 0 !important;
	padding: 30px !important;
}
#modal_outer #modal_container #atbInner{
	border: none !important;
}

/*------------
HOVERBAG
---------------*/
.hoverBag {   
  background: url('assets/shoppingBag.png') no-repeat;
    background-size: contain;
    height: 40px;
    width: 40px;   
    opacity: 0;
    transition: visibility 0s, opacity 0.4s linear;
    position: absolute;
    top: 2%;
    visibility: hidden;
}

.hoverBag.left {left: 2%;}
.hoverBag.right {right: 2%;}