.container {
     margin-top: 250px
 }

 body {
     background-color: #eee
 }

 .demo {
     background-color: rgb(168, 200, 245)
 }

 .pagination-outer {
     text-align: center
 }

 .pagination {
     background-color: #fff;
     border-radius: 25px !important;
     overflow: hidden;
     border: none !important
 }

 a:focus,
 a:active {
     outline: none !important;
     box-shadow: none !important
 }

 .fa {
     font-size: 11px;
     vertical-align: middle !important;
     color: black
 }

 .pagination li.active .fa {
     color: #fff !important
 }

 .pagination li a.page-link {
     color: #505050;
     background-color: transparent;
     font-size: 17px;
     font-weight: 600;
     padding: 17px 25px;
     border: none;
     transition: all 0.3s ease 0s
 }

 .fa-home {
     transform: scale(1.4, 1.4)
 }

 .pagination li:last-child a.page-link {
     border: none
 }

 .pagination li.active a.page-link,
 .pagination li a.page-link:hover,
 .pagination li.active a.page-link:hover {
     background-color: transparent
 }

 .pagination li a.page-link:after {
     content: '';
     background-color: #42A5F5 !important;
     height: 100%;
     width: 100%;
     transform: scaleY(0);
     position: absolute;
     left: 0;
     bottom: 0;
     z-index: -1;
     transition: all 0.3s
 }

 .pagination li.active a.page-link:after,
 .pagination li a.page-link:hover:after,
 .pagination li.active a.page-link:hover:after {
     transform: scaleY(1);
     border-radius: 25px !important
 }

 @media (max-width: 767px) {
     .pagination li a.page-link {
         padding: 11px 8px !important
     }

     .fa {
         font-size: 9px !important
     }

     li a {
         font-size: 12px !important
     }

     .page-item+.page-item {
         padding-left: 0 !important
     }
 }