.column{float:left;}
.size-1of4{width:25%;}
.size-1of3{width:33.333%;}
.size-1of2{width:50%;}
.timeline{padding:15px 0px;}
.timeline:after{content: ""; display: block; clear: both;}
.timeline .column .item{padding:1px; }
.timeline figure a{display: block; position: relative;text-decoration: none;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; overflow: hidden;}
.timeline figure a:hover, .timeline figure a:focus, .timeline figure a:visited, .timeline figure a:active{text-decoration: none;}
.timeline figure a:after{content:"";z-index: 3;left:0px; right:0px; top:0px; bottom:0px; border:1px solid #FFF; background: url("/files/system/img/general/search-icon.png") center center no-repeat;position: absolute;opacity: 0;-webkit-transition: all 0.6s ease-in-out;  -moz-transition: all 0.6s ease-in-out;  -o-transition: all 0.6s ease-in-out;  transition: all 0.6s ease-in-out; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.timeline figure a:before{ opacity: 0;  content: ""; z-index: 2; width: 100%; position: absolute; top: 0px; left: 0px; height: 100%; background: rgba(0, 0, 0, 0.55); -webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out;}
.timeline figure a:hover:after{opacity: 1;left:20px; right:20px; top:20px; bottom:20px;}
.timeline figure a:hover:before{opacity: 1;}
@media screen and (max-width:450px){
	.timeline[data-columns]::before{content:'1 .column';}
}
@media screen and (min-width:451px) and (max-width:700px){
	.timeline[data-columns]::before{content:'2 .column.size-1of2';}
}
@media screen and (min-width:701px) and (max-width:850px){
	.timeline[data-columns]::before{content:'3 .column.size-1of3';}
}
@media screen and (min-width:851px){
	/*.timeline[data-columns]::before{content:'4 .column.size-1of4';}*/
	.timeline[data-columns]::before{content:'3 .column.size-1of3';}
}