﻿/* CSS reset */
ul,ol,li,h1,h2,h3 { 
	margin:0;
	padding:0; 
}

h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}

.ca-menu{
    padding:0;
  
   display:inline
   
}
.ca-menu li{ 
    width: 180px; display:inline-block;
    height: 160px;
    overflow: hidden;
    position: relative; float:left;  margin-top:-11px;   
    background: url(../images/BUTTONS.png) top center no-repeat;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;  
}
.ca-menu li:last-child{
    margin-bottom: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
}
.ca-icon{
    
   
    line-height: 90px;
    position: absolute;  
    left:40px;
    top:12px;
    text-align: center;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.ca-content{
    position: absolute; 
    left: 15px;
    /*width: 200px;*/
    height: 60px;
    top: 130px;  
}
.ca-main{
    font-size: 16px;  text-transform:uppercase;
    color:#99896f; font-family: Times News Roman Regular; margin-top:5px; line-height:18px;line-height:22px\9; margin-top:10px\9;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;  
}
.ca-sub{
    font-size: 16px; 
   color:#6a8781; font-family:Arial; text-transform:uppercase; line-height:16px;line-height:22px\9; margin-top:-5px\9;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear; margin-left:0px;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;  
}
.ca-menu li:hover{
    background: url(../images/BUTTONS1.png) top center no-repeat ;
}
.ca-menu li:hover .ca-icon{
    
    color: #259add;
    opacity: 0.8; 
    
     -webkit-animation: moveFromTop2 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
}

@-webkit-keyframes moveFromTop2 {
    from {
        opacity: 0;
        -webkit-transform: translatex(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translatex(0%);
    }
}
@-moz-keyframes moveFromTop2 {
    from {
        opacity: 0;
        -moz-transform: translatex(-200%);
    }
    to {
        opacity: 1;
        -moz-transform: translatex(0%);
    }
}
@-ms-keyframes moveFromTop2 {
    from {
        opacity: 0;
        -ms-transform: translatex(-200%);
    }
    to {
        opacity: 1;
        -ms-transform: translatex(0%);
    }
}




.ca-menu li:hover .ca-main{
    opacity: 1;
    color:#a84c4c; 
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
}
.ca-menu li:hover .ca-sub{
    opacity: 1;
    -webkit-animation: moveFromBottom 300ms ease-in-out;
    -moz-animation: moveFromBottom 300ms ease-in-out;
    -ms-animation: moveFromBottom 300ms ease-in-out;
    color:#59a496;
}
@-webkit-keyframes moveFromBottom {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        opacity: 0;
        -moz-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        opacity: 0;
        -ms-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromTop {
    from {
        opacity: 0;
        -moz-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromTop {
    from {
        opacity: 0;
        -ms-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}
        
                               
             

.ca-menu2{
    padding:0;display:inline 
}
.ca-menu2 li{ 
    width: 240px; display:inline-block;
    height: 111px;
    overflow: hidden;
    position: relative; float:left;     
    background: url(../images/BUTTONS.png);
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;  border:0px solid red; 
}


.ca-menu2 li:hover{
    background: url(../images/BUTTONS1.png);  cursor:pointer; 
}
.ca-sub2{
    font-size: 18px; font-weight:bold;
   color:#a84c4c; font-family:Arial; text-transform:uppercase; line-height:16px;line-height:22px\9; margin-top:-5px\9;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear; margin-left:0px;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.ca-menu2 li:hover .ca-main{
    opacity: 1;
    color:#8fcec2; 
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
} 
.ca-menu2 li:hover .ca-sub2{
    opacity: 1;
    -webkit-animation: moveFromBottom 300ms ease-in-out;
    -moz-animation: moveFromBottom 300ms ease-in-out;
    -ms-animation: moveFromBottom 300ms ease-in-out;
    color:#727272;
}
.ca-menu2 li:hover .ca-icon2{
    
    color: #259add;
    opacity: 0.8; 
    
     -webkit-animation: moveFromTop2 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
}
.ca-icon2{
    
   
    line-height: 90px;
    position: absolute;  
    left:5px;
    top:20px; 
    text-align: center;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;