.pagination { text-align:right; color:#666; height:58px; overflow:hidden; margin-top:15px; background-color:#ececec; overflow:hidden; padding:0 30px}
   
    .pagination input [type=text] { width: 25px; border:none; outline:none; color:#fff; }
    .pagination .fa-angle-left,
    .pagination .fa-angle-right { font-size:20px; vertical-align:middle; color:#13426b  }

    .pagination .arrow-box        { background-color:transparent; height:62px; width:60px; text-align:center; transition: all 0.3s ease-out}
    .pagination .arrow-box.hidden { opacity:0; visibility:hidden; }
    .pagination .page-box         { padding:25px 20px; overflow:hidden; font-size:15px; line-height:normal;} 

    .pagination .fa-angle-left:before, .pagination .fa-angle-right:before { line-height:1.8}
    .pagination .fa-angle-left, .pagination .fa-angle-right { cursor:pointer;}
    .pagination .arrow-box:hover    { background-color:#ccc; cursor:pointer;}
    .pagination .arrow-box:hover.fa { color:#005dab}

    .field-input       { width:60px; margin:0 10px; padding:0 10px; height:58px; font-size:14px; line-height:normal; text-align: center;
                        border:none; outline:none; background-color:#cbcbcb; color:#454753; transition: all 0.3s ease-out; color:#333}
    .field-input:focus { background-color:#454753; color:#fff;}


    /* iOS hack */
    .pagination textarea, .pagination input[type="text"], .pagination input[type="button"], .pagination input[type="submit"] {-webkit-appearance: none; border-radius: 0;}

    /* ==========================================================================
        Media Style 1024px
    ============================================================================= */
    @media only screen and (max-width: 1024px) {
    .pagination { height:54px;}

    .pagination .arrow-box  { width:54px; height:54px; }
    .field-input            { width:32px; margin:0 5px; padding:0 5px; height:54px; font-size:14px;}
    .pagination .page-box   { padding:19px 15px; font-size:12px; } 
    .pagination .fa-angle-left:before, .pagination .fa-angle-right:before { line-height:3}
    .pagination .fa-angle-left,
    .pagination .fa-angle-right { font-size:20px; }
    }


    /* ==========================================================================
        Media Style 745px
    ============================================================================= */
    @media only screen and (max-width: 745px) {
    .pagination         { margin-top:30px; margin-left:15px; margin-right:15px}
    body.pm .pagination { margin-top:30px; margin-left:0; margin-right:0}

    .pagination { height:50px;}
    .pagination .arrow-box  { height:50px; width:50px;}
    .field-input            { width:50px; margin:0 10px; padding:0 5px; height:50px; font-size:14px;}
    .pagination .page-box   { padding:11px 15px; font-size:14px; } 
    .pagination .fa-angle-left:before, .pagination .fa-angle-right:before { line-height:2.8}
    .pagination .fa-angle-left,
    .pagination .fa-angle-right { font-size:18px; }

    }