@media only screen and (max-width: 800px){

	#history ul.timeline{
		padding:0 0 80px;
	}

	#history ul.timeline li.note{
		width:90%;
		min-height: 100px;
		float:none;
		margin:75px auto;
		clear:both;
	}

	#history ul.timeline li.note:nth-of-type(2n){
		float: none;
	}

	#history ul.timeline li.note:after{
		display: none;
	}

	.note-arrow{
		position: absolute;
		top:-22px;
		right:50%;
	   	margin-right:-8px;
	   	-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	#history ul.timeline li.note:nth-of-type(2n) .note-arrow{
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		transform: rotate(-90deg);
		left:50%;
		margin-left:-8px;
	}

	.timeline-images{
		margin:0 auto;
		text-align: center;
		width:100%;
		left:0;
	}

	.timeline-images a.timeline-image,
	#history ul.timeline li.note:nth-of-type(2n) .timeline-images a.timeline-image{
		display:inline-block;
		margin:0 auto;
		float:none;
		clear: both;
	}

}

/* MAX 768px */

@media only screen and (max-width: 768px){
	.col-xs-2,
	.col-xs-3,
	.col-xs-4,
	.col-xs-5,
	.col-xs-6,
	.col-xs-7,
	.col-xs-8,
	.col-xs-9,
	.col-xs-10{
		width:100%;
		margin:0 auto 20px;
	}

}

@media only screen and (max-width: 480px){
	.timeline-images a.timeline-image{
		width:60px;
		height: 60px;
	}
	.timeline-images a.timeline-image img{
		width:60px;
		height: 60px;
	}
	.timeline-images{
		bottom:-30px;
	}
	.video-button p.video-text{
		font-size:25px;
		line-height: 30px;
	}
}

@media only screen and (max-width: 360px){
	.timeline-images a.timeline-image{
		width:50px;
		height: 50px;
	}
	.timeline-images a.timeline-image img{
		width:50px;
		height: 50px;
	}
	.timeline-images{
		bottom:-25px;
	}

}