@font-face {
    font-family: 'iransans';
    src: url('iransans.ttf');
    font-weight: 100;
}

.ca-menu {
    padding: 0;
    /* margin: 1rem auto; */
    /* width: 80vw; */
    /* 1020px; */
}

.ca-menu li { 
    width: 100%;
    /* 200px; */
    height: 55vh;
    /* 300px; */
    overflow: hidden;
    position: relative; 
    float: left;
    /* background: url('beige_paper.png') repeat top left;     */
    background: #fff;
    border-radius: 2.5rem;
    /* -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: 2px 4px 10px #2a12c4;
    /* margin: 0.8rem; */
    /* margin-right: 1rem; */
    /* -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-right: 0px;
} */

.ca-menu li a {
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
}

.ca-icon {
    font-family: iransans, cursive;
    font-size: 60px;
    color: #333;
    text-shadow: 0px 0px 1px #333;
    line-height: 22vh;
    /* position: absolute; */
    width: 100%;
    height: 50%;
    /* 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;
}

.ca-content {
    /* position: absolute; */
    left: 0px;
    width: 100%;
    height: 50%;
    /* top: 45%; */
}

.ca-main {
    font-size: 1.1vw;
    opacity: 1;
    text-align: center;
    margin-top: 5vh;
    line-height: 4vh;
    color:#000;
    font-weight: 400;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
    /* text-shadow: 2px 2px 1px rgba(255, 255, 255, 1); */
}

.ca-sub {
    text-align: center;
    font-size: 1.1vw;
    font-family: 'Times New Roman', Times, serif;
    color: #ff6600;
    line-height: 4vh;
    opacity: 1;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
    /* text-shadow: 2px 2px 1px rgba(255, 255, 255, 1); */
}

.ca-menu li:hover {
    background-color: #000;
}

.ca-menu li:hover .ca-icon {
    color: #fff;
    /* font-size: 90px; */
    transform: scale(1.25);
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport)
    /* transition: .3s; */
    /* -webkit-animation: moveFromLeftRotate 300ms ease;
    -moz-animation: moveFromLeftRotate 300ms ease;
    -ms-animation: moveFromLeftRotate 300ms ease; */
}

.ca-menu li:hover .ca-main { 
    color: #ff6600;
    font-size: 1.2vw;
    -webkit-animation: moveFromLeftRotate 300ms ease;
    -moz-animation: moveFromLeftRotate 300ms ease;
    -ms-animation: moveFromLeftRotate 300ms ease;
    /* text-shadow: 2px 2px 1px rgba(255, 255, 255, 1); */
}

.ca-menu li:hover .ca-sub {
    color: #ffffff;
    text-shadow: 0 0 black;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
}

@-webkit-keyframes moveFromLeftRotate {
    from {
        -webkit-transform: translateY(-50%) rotate(0deg);
    }
    to {
        -webkit-transform: translateY(0%) rotate(0deg);
    }
}

@-moz-keyframes moveFromLeftRotate {
    from {
        -moz-transform: translateY(-50%) rotate(0deg);
    }
    to {
        -moz-transform: translateY(0%) rotate(0deg);
    }
}

@-ms-keyframes moveFromLeftRotate {
    from {
        -ms-transform: translateY(-50%) rotate(0deg);
    }
    to {
        -ms-transform: translateY(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%);
    }
}