.btn-item{
	background-color: transparent;
	display: block;
	padding: 10px 15px;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
    color: #fff;
    width: 220px;
    height: 50px;
    text-align: center;
    transition-delay: 0.3s;
	display: inline-block;
	cursor: pointer;
	margin-left:-6px;
	font-family: 'Roboto Slab', serif;
}
.btn-item:hover{
	transition-delay: 0s;
}

.btn-item .after{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	transition: background-color 0.3s;
	background-color: rgba(23, 41, 95, 0.3);
}
.btn-item:hover .after{
	background-color: rgba(23, 41, 95, 0.6);
}
.btn-item.see-all .after{
	background-color: #5d6492;
}
.btn-item.see-events .after{
	background-color: #ffd400;
}

.btn-item.see-events { color:#333;}
.btn-item.see-all:hover .after,
.btn-item.see-events:hover .after{
	background-color: #172958;
}

.btn-item.see-all:hover 	{ color:#ffd400;}
.btn-item.see-events:hover  { color:#ffd400;}

.btn-item .top1,
.btn-item .top2,
.btn-item .bottom1,
.btn-item .bottom2,
.btn-item .left1,
.btn-item .left2,
.btn-item .right1,
.btn-item .right2,
.btn-item .l-af,
.btn-item .l-bf{
	position: absolute;
	background-color: #fff;
	transition: all 0.6s;
}
.btn-item .top1,
.btn-item .top2,
.btn-item .bottom1,
.btn-item .bottom2{
	width: 100%;
	height:2px;
}
.btn-item .left1,
.btn-item .left2,
.btn-item .right1,
.btn-item .right2{
	width: 2px;
	height: 100%;
}
.btn-item .top1,
.btn-item .top2{
	top: 0px;
}
.btn-item .bottom1,
.btn-item .bottom2{
	bottom: 0px;
}
.btn-item .left1,
.btn-item .left2{
	left: 0px;
}
.btn-item .right1,
.btn-item .right2{
	right: 0px;
}
.btn-item .top1{
	left: 0;
}
.btn-item .top2{
	left: -200%;
}
.btn-item .bottom1{
	right: 0;
}
.btn-item .bottom2{
	right: -200%;
}
.btn-item .left1{
	bottom: 0;
}
.btn-item .left2{
	bottom: -200%;
}
.btn-item .right1{
	top: 0;
}
.btn-item .right2{
	top: -200%;
}
.btn-item:hover .top1,
.btn-item:hover .top2,
.btn-item:hover .bottom1,
.btn-item:hover .bottom2,
.btn-item:hover .left1,
.btn-item:hover .left2,
.btn-item:hover .right1,
.btn-item:hover .right2{
	transition-delay: 0.3s;
}
.btn-item:hover .top1{
	left: 200%;
}
.btn-item:hover .top2{
	left: 0;
}
.btn-item:hover .bottom1{
	right: 200%;
}
.btn-item:hover .bottom2{
	right: 0;
}
.btn-item:hover .left1{
	bottom: 200%;
}
.btn-item:hover .left2{
	bottom: 0;
}
.btn-item:hover .right1{
	top: 200%;
}
.btn-item:hover .right2{
	top: 0;
}
.btn-item .btn-title{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

@media only screen and (max-width: 1200px){
	.btn-item	{ padding:10px 10px; width:170px; margin-left:-6px;}
}



@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.btn-item.archievements	{ padding:10px 10px; width:200px; margin-left:-6px;}
	.btn-item.recent-events	{ padding:10px 10px; width:130px; margin-left:-6px;}

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.btn-item.archievements	{ padding:10px 10px; width:200px; margin-left:-6px;}
	.btn-item.recent-events	{ padding:10px 10px; width:140px; margin-left:-6px;}

}

@media only screen and (max-width: 767px){
	.btn-item	{ padding:5px 10px; width:200px; margin-left:-6px;}
	.btn-item:first-child { margin-bottom:20px}
}