.ca-menu{
    padding:0;
    margin:20px auto;
    width: 1020px;
}
.ca-menu li {
  background: none repeat scroll 0 0 #FFFFFF;
  box-shadow: 1px 1px 2px rgba(73, 54, 38, 0.2);  -moz-box-shadow: 1px 1px 2px rgba(73, 54, 38, 0.2);
  -webkit-box-shadow: 1px 1px 2px rgba(73, 54, 38, 0.2);

  float: left;
  height: 286px;
  margin-bottom: 16px;
  margin-right: 14px;
  overflow: hidden;
  position: relative;
  transition: all 300ms linear 0s;
  width: 189px;
}

.ie8 .ca-menu li {border:1px solid #eeeeee;}
.ie7 .ca-menu li {border:1px solid #eeeeee; width:184px;}

.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;
}
.ca-icon{
    color: #333;
    text-shadow: 0px 0px 1px #333;
    line-height: 98px;
    position: absolute;
    width: 100%;
    height: 35%;
    left: 0px;
    top: 0px;
    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;
	background-color:#68bbe5;
}
.ca-content{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 54%;
   bottom:0px;
}
.ca-main{
height:63px;
color: #493626;
font-size: 22px;
font-weight: 400;
line-height: 25px;
    opacity: 0.8;
    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;
	
}
.ca-sub{
    text-align:center;
    font-size: 13px;
    color: #666;
    line-height: 116px;
    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; font-weight:normal;
}
.ca-menu li:hover{
    background-color: #44589B;
}
.ca-menu li:hover .ca-icon{
    color: #fff;
    font-size: 90px; -moz-transform:scale(1.1); /*scale up image 1.8x*/
-webkit-transform:scale(1.1);
-o-transform:scale(1.1); 
background-color:#44589B;
}
.ca-menu li:hover .ca-main{
    color: #68bbe5;
	font-weight:bold;
    -webkit-animation: moveFromLeftRotate 300ms ease;
    -moz-animation: moveFromLeftRotate 300ms ease;
    -ms-animation: moveFromLeftRotate 300ms ease;
}
.ca-menu li:hover .ca-sub{
    color: #fff;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
}
@-webkit-keyframes moveFromLeftRotate{
    from {
        -webkit-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -webkit-transform: translateX(0%) rotate(0deg);
    }
}
@-moz-keyframes moveFromLeftRotate{
    from {
        -moz-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -moz-transform: translateX(0%) rotate(0deg);
    }
}
@-ms-keyframes moveFromLeftRotate{
    from {
        -ms-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -ms-transform: translateX(0%) rotate(0deg);
    }
}

@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(100%);
    }
    to {
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(100%);
    }
    to {
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        -ms-transform: translateY(100%);
    }
    to {
        -ms-transform: translateY(0%);
    }
}



@media only screen 
and (max-width : 320px) {
.ca-menu{width:100%;}
.ca-menu li{width:100%;}
}

@media only screen 
and (min-width : 320px) 
and (max-width : 445px) {
.ca-menu{width:100%;}
.ca-menu li{width:100%;}
}


@media only screen 
and (min-width : 446px) 
and (max-width : 539px) {
.ca-menu{width:100%;}
.ca-menu li{width:46.5%;}
}

@media only screen 
and (min-width : 540px) 
and (max-width : 739px) {
.ca-menu{width:100%;}
.ca-menu li{width:30.5%;}
}


@media only screen 
and (min-width : 740px) 
and (max-width : 1100px) {
.ca-menu{width:100%;}
.ca-menu li{width:23%;}
}