html, body {margin: 0;}

body{
	font-family: Roboto, Helvetica, Arial, sans;
	margin: 0px;
	padding: 0px;
	background: white;
	color: #4c4c4c;
}

body, body * {box-sizing: border-box;
  backface-visibility: hidden;
  outline: 1px solid transparent;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#ctnr {
	width: 970px;
	height: 250px;
	position: relative;
	border: 1px solid #000;
	background: #273741 url(vehicle.jpg) no-repeat bottom left;
	overflow: hidden;
}
img {display: block; border: none; margin: 0; padding: 0;}

.f2 #cta{opacity: 1; 
transition-delay: 2s;
-webkit-transition-delay: 2s;
}
.f2 .feeling {opacity: 1;}
.f2 .click {opacity: 1;
transition-delay: .8s;
-webkit-transition-delay: .8s;}

.s {position: absolute; overflow:visible; background-repeat: no-repeat;}

.feeling {
	width: 261px;
	height: 40px;
	top: 113px;
	right: 65px;
	opacity: 0;
	transition: opacity 1s 0s;
	-webkit-transition: opacity 1s 0s;
	}
.click {
	width: 189px;
	height: 40px;
	top: 150px;
	right: 113px;
	opacity: 0;
	transition: opacity 1s 0s;
	-webkit-transition: opacity 1s 0s;
	}

#feature {
position: absolute;
width: 608px;
height: 250px;
left: 0;
top: 0px;
background: #ebebeb;
/* text-align:center; */
font-size: 14px;
opacity: 0;
z-index:50;
	transition: opacity 1s 0s;
	-webkit-transition: opacity 1s 0s;
}
.showFeature #feature {display: block; opacity: 1;}

.featureImg {
/* width: 274px; */
/* height: 213px; */
position: absolute;
}
.featureImg  img {display: none;}
.featureImgBorder {
border: 1px solid rgba(235, 235, 235, .2);
width: 274px;
height: 213px;
position: absolute;
top: 0;
}
#x {
pointer-events:none;
position: absolute;
width: 20px;
height: 20px;
background: url(x.png) no-repeat;
right: 370px;
z-index:200;
top: 10px;
opacity: 0;
cursor: pointer;
	transition: opacity 1s 0s;
	-webkit-transition: opacity 1s 0s;
}
#l {
pointer-events:none;
position: absolute;
width: 25px;
height: 25px;
background: url(l.png) no-repeat;
left: 0;
z-index:200;
top: 115px;
opacity: 0;
cursor: pointer;
	transition: opacity 1s 0s;
	-webkit-transition: opacity 1s 0s;
}
#r {
pointer-events:none;
position: absolute;
width: 25px;
height: 25px;
background: url(r.png) no-repeat;
right: 691px;
z-index:200;
top: 115px;
opacity: 0;
cursor: pointer;
	transition: opacity 1s 0s;
	-webkit-transition: opacity 1s 0s;
}
.showFeature  #x,
.showFeature  #l,
.showFeature  #r  {opacity: 1;
pointer-events:all;}

.featureNav {
height: 25px;
position: absolute;
/* width: 100%; */
line-height: 25px;
letter-spacing: -1px;
font-weight: 500;
margin: 42px 0 0 310px;
font-size: 13px;
}
.featureNav * {
display: inline-block !important;
vertical-align: middle;
}

.featureTitle {
font-weight: 900;
text-transform: uppercase;
font-size: 13.5px;
letter-spacing: 2px;
font-family: Montserrat, Roboto, Helvetica, Arial, sans;
margin: 10px 0 0 310px;}
.featureTitle span, .featureDesc span {
display: none;
}
.show {display: block !important; opacity: 1 !important;}

.featureDesc {
padding: 0 40px 0 20px;
font-size: 14px;
line-height: 15px;
margin-left: 290px;}

.logo {width: 182px; height: 60px; top: 34px; right: 81px;}
  
.cta {
  width: 236px;
  height: 27px;
  right: 52px;
  bottom: 22px;
  opacity: 0;
  transition: opacity 1s 0s;
  -webkit-transition: opacity 1s 0s;
  }

#clickthru {
width: 100%;
height: 100%;
position: absolute;
z-index: 55;
opacity: 0;
cursor:pointer;
}
.clickable {z-index: 100;cursor:pointer;}

@keyframes pulsate {
    0% {transform: scale(.2) translate3D(0, 0, 0) rotate(.1deg);}
    50% {transform: scale(1.4) translate3D(0, 0, 0) rotate(.1deg);}
    100% {transform: scale(.2) translate3D(0, 0, 0) rotate(.1deg);}
 }
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(.2) translate3D(0, 0, 0) rotate(.1deg);}
    50% {-webkit-transform: scale(1.4) translate3D(0, 0, 0) rotate(.1deg);}
    100% {-webkit-transform: scale(.2) translate3D(0, 0, 0) rotate(.1deg);}
 }
 
.spot {
position: absolute;
transition: opacity 1s 0s;
-webkit-transition: opacity 1s 0s;
transform: scale(.7) translate3D(0, 0, 0) rotate(.1deg);
-webkit-transform: scale(.7) translate3D(0, 0, 0) rotate(.1deg);

transition: transform .5s 0s, opacity .5s 0s;
-webkit-transition: -webkit-transform .5s 0s, opacity .5s 0s;
}
.spot>div {
-webkit-animation: pulsate 1.5s ease-in-out infinite;
animation: pulsate 1.5s ease-in-out infinite;
width: 66px;
height: 66px;
border: 10px solid rgba(209, 210, 211, .2);
border-radius: 60px;
}

.spot:hover {
transform: scale(.7) translate3D(0, 0, 0) rotate(.1deg);
}
.spot:hover>div {
-webkit-animation: none;
animation: none;
}

.spot>div>div {width: 100%; height: 100%; border: 10px solid rgba(209, 210, 211, .5); border-radius: 30px;}
.spot>div>div>div {width: 100%; height: 100%; background: #d3d3d4; border-radius: 30px;}
.showFeature .spot {pointer-events: none;opacity: 0;}

.spot-xtra {
position: absolute;
background: #d3d3d4; border-radius: 30px;
width: 10px;
height: 10px;
margin: 28px 0 0 28px;
pointer-events: none;
}
#featureAvail{
	font-family: 'Proxima Nova', Arial, sans;
	font-size:10px;
	color:#7b7b7b;
	position:absolute;
	z-index:2000;
	cursor:pointer;
	top: 74px;
	display:none;
}
#availTitle {
	display:block;
	position:absolute;
	left:0px;
	width:80px;
	text-align:left;
	padding-left:8px;
	margin-top:-68px;
	white-space:nowrap;
}
#available {
	display:none;
	position:absolute;
	width:301px;
	padding:5px;
	top:-75px;
	left:-1px;
	background-color:rgba(0,0,0,0.5);
	pointer-events: none;
	color:#FFF;
	text-align:center;
}
#featureAvail:hover #available {
	display:block!important;
	position:absolute;
	z-index:88;
}