/**** spider ****/

#roarspider {
            margin:0 auto; text-align:center; position:relative;     
}            

ul.ulspider {
	display: block;
	width:800px;
	text-align: center;
	margin:-20px auto 30px auto;
	padding:11px 10px;
	height:0;
	border-bottom:2px solid #a2a2a2;
	position: relative;
	color:#a2a2a2;
}

ul.ulspider:before,
ul.ulspider:after{
	content:"|";
	position: absolute;
	font-weight: bold;
	font-size:18px;
	top:11px;
}

ul.ulspider:before{
	left:-1px;
}

ul.ulspider:after{
	right:-1px;
}

ul.ulspider li{
	display: inline-block;
	width:180px;
}

ul.ulspider li a{
	color:#333;
	background-color:#333;
	border:4px solid #fff;
	width:15px;
	height:15px;
	display: block;
	border-radius: 100px;
	position: relative;
	margin:2px auto;
}

ul.ulspider li a.active{
	background-color:#ab1116;
	padding:0;
}

ul.ulspider li a:before{
	position: absolute;
	top:-45px;
	left:-85px;
	width:180px;
	display: block;
	text-align: center;
	/*text-transform: capitalize;*/
	content:attr(title);
	font-size:16px;
}

.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;
	font-size: 18px;
	line-height: 27px;
	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;
}

/*.monocoque
{
	visibility: visible;
}*/


#roarspider .label{
	position: absolute;
	font-size:26px;
	color:#000;
    /*font-size: 1.7142em;*/
}

#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:2px;
    top:10px;
}

.radiators .callout.fourth,
.driver .callout.third,
.highfrequency .callout.second,
.monocoque .callout.first {
    left:20px;
    top:50px;
    width: 42%;
    text-align: left;
}

/*.highfrequency .label.second {
        left:200px;
    top:10px;
}

.highfrequency .callout.second {
    left:200px;
    top:25px;
}

.driver .label.third {
        left:200px;
    top:10px;
}

.driver .callout.third {
    left:200px;
    top:25px;
}

.radiators .label.fourth {
        left:200px;
    top:10px;
}

.radiators .callout.fourth {
        left:200px;
    top:25px;
}*/

/**** end ***/
#roarspider img{
	    margin-top:70px;
	}

@media (min-width:1200px) {
	#roarspider img{
	    margin-top:40px;
	}
	.radiators .callout.fourth,
.driver .callout.third,
.highfrequency .callout.second,
.monocoque .callout.first {
    width: 40%;
  }

  ul.ulspider {
		margin:30px auto;
	}
	@media (min-width:1400px) {
		.radiators .callout.fourth,
	.driver .callout.third,
	.highfrequency .callout.second,
	.monocoque .callout.first {
	    width: 28%;
	  }

	  #roarspider img{
	    margin-top:0px;
	}
	}
}