@font-face {

    font-family: 'WebSymbolsRegular';

    src: url('websymbols/websymbols-regular-webfont.eot');

    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),

        url('websymbols/websymbols-regular-webfont.woff') format('woff'),

        url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),

        url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');

    font-weight: normal;

    font-style: normal;

}

.ca-menu{

    padding:0;

    margin:20px auto;

    width: 1020px;

}

.ca-menu li{

	width: 230px;

	height: 230px;

	border: 0;

	overflow: hidden;

	position: relative;

	float:left;

	background: #fff;

	margin-right: 4px;

	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

	-webkit-border-radius: 0px;

	-moz-border-radius: 0px;

	border-radius: 0px;

	-webkit-transition: all 400ms linear;

	-moz-transition: all 400ms linear;

	-o-transition: all 400ms linear;

	-ms-transition: all 400ms linear;

	transition: all 400ms linear;







	background-image: url(img/vl

&pl/final%20type%20(B)%202.jpg);

	background-image: url(img/vl&pl/33.jpg);

}

.ca-menu li:last-child{

    margin-right: 0px;

}

.ca-menu li a{

	text-align: center;

	width: 250px;

	height: 250px;

	display: block;

	color: #333;

	position: relative;



}

.ca-icon{

	font-family: 'WebSymbolsRegular', cursive;

	font-size: 40px;

	color: #f6f6f6;

	;

	line-height: 60px;

	position: absolute;

	width: 117px;

	height: 60px;

	left: 58px;

	top: 18px;

	text-align: center;

	-webkit-transition: all 400ms linear;

	-moz-transition: all 400ms linear;

	-o-transition: all 400ms linear;

	-ms-transition: all 400ms linear;

	transition: all 400ms linear;

}

.ca-main{

	font-size: 24px;

	position: absolute;

	top: 151px;

	height: 80px;

	width: auto;

	left: 122px;

	margin-left: -85px;

	opacity: 0.8;

	text-align: center;

}

.ca-sub{

	text-align:center;

	color: #000;

	font-size: 26px;

	position: absolute;

	height: 80px;

	width: 170px;

	left: 140px;

	margin-left: -85px;

	top: 101px;

	opacity: 0;

	-webkit-transition: all 400ms linear;

	-moz-transition: all 400ms linear;

	-o-transition: all 400ms linear;

	-ms-transition: all 400ms linear;

	transition: all 400ms linear;

}

.ca-menu li:hover{

	background: #f7f7f7;

	border-color: #fff;

	-webkit-transform: rotate(360deg);

	-moz-transform: rotate(360deg);

	-o-transform: rotate(360deg);

	-ms-transform: rotate(360deg);

	transform: rotate(360deg);

	box-shadow: 0px 45px 60px -50px #000000;

	opacity: .30;

}

.ca-menu li:hover .ca-icon{

    color: #555;

    font-size: 60px;

}

.ca-menu li:hover .ca-main{

    display: none;

}

.ca-menu li:hover .ca-sub{

    opacity: 0.8;

}