@font-face {

    font-family: 'WebSymbolsRegular';

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

    src: url('websymbols/websymbols-regular-webfontd41d.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-top: 20px;

	margin-right: auto;

	margin-bottom: 20px;

	margin-left: auto;

}

.ca-menu li{

	width: 300px;

	height: 238px;

	overflow: hidden;

	position: relative;

	float: left;

	

	-webkit-transition: all 300ms linear;

	-moz-transition: all 300ms linear;

	-o-transition: all 300ms linear;

	-ms-transition: all 300ms linear;

	transition: all 300ms linear;

	background-color: #FFF;

}

.ca-menu li:last-child{

    margin-right: 0px;

}

.ca-menu li a{

	text-align: left;

	width: 100%;

	height: 100%;

	display: block;

	color: #333;

	position: relative;

	margin-left: 10px;

}

.ca-icon{

	font-family: 'WebSymbolsRegular', cursive;

	color: #c5e4f4;

	font-size: 90px;

	text-shadow: 1px 0px 1px rgba(255,255,255,0.7);

	line-height: 150px;

	position: absolute;

	width: 315px;

	height: 245px;

	left: -20px;

	top: -26px;

	text-align: center;

	-webkit-transition: all 200ms linear;

	-moz-transition: all 200ms linear;

	-o-transition: all 200ms linear;

	-ms-transition: all 200ms linear;

	transition: all 200ms linear;

	background-color: #FFF;

}

.ca-content{

	position: absolute;

	left: 6px;

	width: 281px;

	top: 127px;

}

.ca-main{

	font-size: 25px;

	color: #F00;

	text-align: center;

	-webkit-transition: all 200ms linear;

	-moz-transition: all 200ms linear;

	-o-transition: all 200ms linear;

	-ms-transition: all 200ms linear;

	transition: all 200ms linear;

	font-weight: bold;

}

.ca-sub{

    text-align:center;

    font-size: 14px;

    color: #666;

    line-height: 40px;

    opacity: 0.8;

    -webkit-transition: all 200ms linear;

    -moz-transition: all 200ms linear;

    -o-transition: all 200ms linear;

    -ms-transition: all 200ms linear;

    transition: all 200ms linear;

}

.ca-menu li:hover{



}

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

	text-shadow: 0px 0px 20px #c5e4f4;

	-webkit-animation: moveFromTop 400ms ease;

	-moz-animation: moveFromTop 400ms ease;

	-ms-animation: moveFromTop 400ms ease;

}

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

	color: #F00;

	-webkit-animation: moveFromTop 300ms ease;

	-moz-animation: moveFromTop 300ms ease;

	-ms-animation: moveFromTop 300ms ease;

}

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

    color: #000;

    -webkit-animation: moveFromBottom 500ms ease;

    -moz-animation: moveFromBottom 500ms ease;

    -ms-animation: moveFromBottom 500ms ease;

}

@-webkit-keyframes moveFromTop {

    from {

        -webkit-transform: translateY(-300%);

    }

    to {

        -webkit-transform: translateY(0%);

    }

}

@-moz-keyframes moveFromTop {

    from {

        -moz-transform: translateY(-300%);

    }

    to {

        -moz-transform: translateY(0%);

    }

}

@-ms-keyframes moveFromTop {

    from {

        -ms-transform: translateY(-300%);

    }

    to {

        -ms-transform: translateY(0%);

    }

}



@-webkit-keyframes moveFromBottom {

    from {

        -webkit-transform: translateY(200%);

    }

    to {

        -webkit-transform: translateY(0%);

    }

}

@-moz-keyframes moveFromBottom {

    from {

        -moz-transform: translateY(200%);

    }

    to {

        -moz-transform: translateY(0%);

    }

}

@-ms-keyframes moveFromBottom {

    from {

        -ms-transform: translateY(200%);

    }

    to {

        -ms-transform: translateY(0%);

    }

}