/**** spider ****/
#roarspider {
  margin:0 auto;
  text-align:center;
  position:relative;
}
#roarspider * {
	box-sizing:content-box;
  -webkit-box-sizing:content-box;
}

ul.ulspider {
	display: block;
	width:800px;
	text-align: center;
	margin:40px auto;
	padding:0px 10px;
	height:14px;
	position: relative;
	color:#a2a2a2;
}
ul.ulspider:before{
	left:-1px;
}
ul.ulspider:after{
	right:-1px;
}
ul.ulspider li{
	display: inline-block;
	width:180px;
}
ul.ulspider li a{
	color:#333;
	border:4px solid #fff;
	width:30%;
	height:10px;
	display: block;
	border-radius: 100px;
	position: relative;
	margin:2px auto;
}
ul.ulspider li a.active{
	/*border-bottom:2px solid #26AFFF;*/
	padding:0;
}
ul.ulspider li a.active:before{
	border-bottom:2px solid #26AFFF;
}
ul.ulspider li a:before{
	font-size:14px;
	position: absolute;
	top:-30px;
	left:calc(50% - 90px);
	width:140px;
	margin:0 20px;
	display: block;
	text-align: center;
	content:attr(title);
}

.callout{
	position: absolute;
	display: block;
	overflow: hidden;
	background-color:#fff;
	border-radius: 3px;
}
.callout.inactive{
	background-color: transparent;
}
.callout.inactive .spot{
	background-color:#333;
}
.callout p{
	padding:0;
	margin:0;
}
.callout .spot{
	position: absolute;
	display: block;
	width:12px;
	height:12px;
	border:3px solid #fff;
	border-radius:200px;
	background-color:#ab1116;
	z-index: 10;
	background-color:#333;
}
.callout .spot:hover{
	background-color:#ab1116;
}
.callout,.label{
	visibility: hidden;
}


#roarspider .label{
	position: absolute;
	color:rgb(77, 77, 77);
  font-size: 24px;
  font-weight:100;
  padding:0;
}
#roarspider .callout.top-left .spot{top:0; left:0;}
#roarspider .callout.top-right .spot{top:0; right:0;}
#roarspider .callout.bottom-left .spot{bottom:0; left:0;}
#roarspider .callout.bottom-right .spot{bottom:0; right:0;}

.monocoque .label.first,
.monocoque .callout.first,
.highfrequency .label.second,
.highfrequency .callout.second,
.driver .label.third,
.driver .callout.third,
.radiators .label.fourth,
.radiators .callout.fourth
{
    visibility:visible;
}

.radiators .label.fourth,
.driver .label.third,
.highfrequency .label.second,
.monocoque .label.first {
    left:20px;
    top:10px;
}
.radiators .callout.fourth,
.driver .callout.third,
.highfrequency .callout.second,
.monocoque .callout.first {
    left:20px;
    top:50px;
    width: 40%;
    text-align: left;
}
/**** end ***/
@media(min-width:768px)and(max-height:900px){
	#roarspider img {
		max-height:70vh;
	}
}
@media(max-width:768px){
	ul.ulspider{
		display:none !important;
	}
	.spider-desc {
		margin-bottom:30px;
	}
}
@media(min-width:768px){
	.spider-desc {
		min-height:190px;
	}
	.spider-desc div{
		display:none;
	}
	.spider-desc div.active{
		display:block;
	}
}
@media(min-width:1200px){
	ul.ulspider{
		margin-top:2vw;
		margin-bottom:5vw;
	}
}