.roar-family-timeline {
	list-style: none;
	padding: 0;
}

.roar-family-timeline li a {
	color: #252525;
}

.roar-family-timeline li h4 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1.1em;
}

.roar-family-timeline li p {
	text-align:center !important;
}

@media (min-width: 500px) {
	.roar-family-timeline li {
		width: 50%;
		float:left;
	}
}

@media (min-width: 768px) {
	.roar-family-timeline li {
		width: 25%;
	}

	.roar-family-timeline li img {
		margin: 0 auto;
	}

}

/**** 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:10px auto 30px auto;
	padding:46px 10px 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:auto;
}

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:10px;
	height:10px;
	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:-50px;
	left:-83px;
	width:170px;
	display: block;
	text-align: center;
	/*text-transform: capitalize;*/
	content:attr(title);
  line-height: 20px;
  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: 20px;*/
	/*line-height: 30px;*/
	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:16px;*/
	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;
}

/*.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 ***/