/*===================== Car Highlight labels ================== */
.highlight-labels-wrapper, .highlight-label-popup{
	font-size:11px;
	font-family:Arial;
}
.highlight-labels-wrapper{
	margin-bottom:10px;
}
.highlight-label{
	display:inline-block;
	vertical-align:middle;
	border-radius: 30px;
	background: #000;
	color:#fff;
	position:relative;
	padding:4px 20px;
	cursor:pointer;
	margin-right:10px;
	margin-bottom:10px;
}
.highlight-label.highlight-label-light{
	color:#000;
}
.highlight-label span{
	font-style: normal;
	font-weight: 800;
	line-height: 21.6px;
	letter-spacing: 0.75px;
}
.highlight-label .highlight-label-popup-wrapper, .highlight-labels-plus .highlight-label-popup-wrapper{
	display:none;
}
.highlight-label:hover .highlight-label-popup-wrapper, .highlight-labels-plus:hover .highlight-label-popup-wrapper{
	display:none;
}
.highlight-label-popup-wrapper{
	position:absolute;
	z-index:999;
	left:calc(50% - 25px);
	bottom:30px;
	width:200px;
	text-align:left;
}
#auto-highlight-label-popup-wapper{
	position:absolute;
	z-index:999;
	width:200px;
	text-align:left;
	opacity:0;
}

.highlight-label-popup{
	position:relative;
	margin-bottom:15px;
	background: #FFF;
	color: #000;
	padding:10px;
	/*-webkit-box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.25);
	-moz-box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.25);
	box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.25);*/
	-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);
	
	border-radius:10px;
}


.highlight-label-popup::after{
	content: '';
    border-top: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
	position: absolute;
    bottom: -9.5px;
    left: 15px;
	z-index:9;
}

.highlight-label-right .highlight-label-popup-wrapper{
	left: initial;
	right:calc(50% - 25px);
}
.highlight-label-right .highlight-label-popup::after, .highlight-label-popup-right.highlight-label-popup::after{
	left: initial;
	right:15px;
}

.highlight-label-popup .highlight-label-popup-heading {
	font-weight: 800;
	font-size:1.2em;
}

.highlight-label-popup .highlight-label-popup-text{
	letter-spacing: 0.75px;
	line-height:20px;
	font-weight:400;
}
.highlight-labels-plus{ /*.highlight-labels-plus::before*/
	position:relative;
	content: " ";
    vertical-align: middle;
	margin-left:10px;
    margin-bottom: 10px;
	background: #fff;
	color:#000;
    height: 24px;
    width: 24px;
	border:1px solid #fff;
    text-align: center;
    border-radius: 50%;
	transition: all 0.3s;
	cursor:pointer;
	display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.highlight-labels-plus svg, .highlight-labels-plus .labels-plus-text  {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	width:12px;
	height:12px;
}
.labels-plus-text > div{
	position: absolute;
	z-index: 3;
	top: calc( 50% - 1.5px);
	left:0px;
	width:100%;
	height:3px;
	background:#000;
	border-radius: 3px;
}
.labels-plus-text > div:last-child{
	-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.highlight-labels-plus .circle2,
.highlight-labels-plus .circle3,
.highlight-labels-plus .circle4{
  transform-box: fill-box;
    transform-origin: center;
  animation: loaderAnimZoomOut 4000ms infinite ease-out;
  -webkit-animation: loaderAnimZoomOut 4000ms infinite ease-out;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:50%;
  z-index:1;
}

.highlight-labels-plus .circle1{
  animation-delay: 500ms;
  background:#fff
}
.highlight-labels-plus .circle2{
  animation-delay: 500ms;
  background:#fff
}
.highlight-labels-plus .circle3{
  animation-delay: 1500ms;
  background:#fff
}
.highlight-labels-plus .circle4{
  animation-delay: 3000ms;
   background:#fff
}

main [class^="col-"]:hover, main [class*=" col-"]:hover,
main [class^="col-"]:active, main [class*=" col-"]:active{
  z-index:9;
}

@keyframes loaderAnimZoomOut{
  from{
    transform: scale(1);
    opacity: .5;
  }
  to{
    transform: scale(3);
    opacity: 0;
  }
}
@-webkit-keyframes loaderAnimZoomOut{
  from{
    transform: scale(1);
    opacity: .5;
  }
  to{
    transform: scale(3);
    opacity: 0;
  }
}