.modal-content {
      background-size: cover;
      background-image: url(" ");
    }
    
    #home_quicklinks {
        padding: 20px 0;
        text-align: center;
    }
    a.quicklink.link1 {
        background: #ff5806;
        opacity: 0.5;
    }
    a.quicklink {
        display: inline-block;
        width: 302px;
        height: 173px;
        position: relative;
        margin: 90px 30px;
    }
    a.quicklink .ql_caption {
        display: block;
        height: 100%;
        width: 100%;
        position: relative;
    }
    .outer {
        display: table;
        position: relative;
        vertical-align: middle;
        text-align: center;
        height: 100%;
        width: 100%;
        border-spacing: 0px;
        padding: 0px;
    }
    .inner {
        display: table-cell;
        position: relative;
        vertical-align: middle;
        text-align: center;
        height: 100%;
        width: 100%;
        border-spacing: 0px;
        padding: 0px;
    }
    a.quicklink .ql_caption h2 {
        margin: 0px;
        padding: 0px;
        text-transform: uppercase;
        line-height: 1.46em;
        color: #fff;
    }
    a.quicklink.link1 .ql_top {
        border-bottom-color: #fc6719;
    }
    a.quicklink.link1 .ql_bottom {
        border-top-color: #fc6719;
    }
    
    
    .ql_top {
        bottom: 173px;
        border-bottom: 89px solid #ccc;
        
    }
    .ql_bottom {
        top: 173px;
        border-top: 89px solid #ccc;
    }
    .ql_top, .ql_bottom {
        position: absolute;
        left: 0px;
        width: 0px;
        border-left: 151px solid transparent;
        border-right: 151px solid transparent;
    }
    
    a.quicklink.link2 {
        background: #ff5806;
        opacity: 0.5;
    }
    a.quicklink.link2 .ql_top {
        border-bottom-color: #fcf4e7;
    }
    a.quicklink.link2 .ql_bottom {
        border-top-color: #fcf4e7;
    }
    
    
    a.quicklink.link3 .ql_top {
        border-bottom-color: #bcbdc0;
    }
    a.quicklink.link3 .ql_bottom {
        border-top-color: #bcbdc0;
    }
    a.quicklink.link3 {
        background: #ff5806;
        opacity: 0.5;
    }
    a.quicklink {
        font-size: 36px;
        font-weight: 500;
        text-decoration:none;
    }
    .hexagon {
      position: relative;
      width: 300px; 
      height: 173.21px;
      margin: 86.60px 0;
      background-image: url(http://csshexagon.com/img/meow.jpg);
      background-size: auto 334.8632px;
      background-position: center;
      box-shadow: 0 0 20px rgba(0,128,192,0.6);
      border-left: solid 5px #4a401c;
      border-right: solid 5px #4a401c;
    opacity: 0.5;
    }
    
    .hexTop,
    .hexBottom {
      position: absolute;
      z-index: 1;
      width: 212.13px;
      height: 212.13px;
      overflow: hidden;
      -webkit-transform: scaleY(0.5774) rotate(-45deg);
      -ms-transform: scaleY(0.5774) rotate(-45deg);
      transform: scaleY(0.5774) rotate(-45deg);
      background: inherit;
      left: 38.93px;
      box-shadow: 0 0 20px rgba(0,128,192,0.6);
    opacity: 0.5;
    }
    
    /*counter transform the bg image on the caps*/
    .hexTop:after,
    .hexBottom:after {
      content: "";
      position: absolute;
      width: 290.0000px;
      height: 167.4315780649915px;
      -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-83.7158px);
      -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-83.7158px);
      transform:          rotate(45deg) scaleY(1.7321) translateY(-83.7158px);
      -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      transform-origin: 0 0;
      background: inherit;
    opacity: 0.5;
    }
    
    .hexTop {
      top: -106.0660px;
      border-top: solid 7.0711px #4a401c;
      border-right: solid 7.0711px #4a401c;
    }
    
    .hexTop:after {
      background-position: center top;
    }
    
    .hexBottom {
      bottom: -106.0660px;
      border-bottom: solid 7.0711px #4a401c;
      border-left: solid 7.0711px #4a401c;
    }
    
    .hexBottom:after {
      background-position: center bottom;
    }
    
    .hexagon:after {
      content: "";
      position: absolute;
      top: 2.8868px;
      left: 0;
      width: 290.0000px;
      height: 167.4316px;
      z-index: 2;
      background: inherit;
    opacity: 0.5;
    }
    /* number of images*/
    .gallery {
      --s: 280px;
      /* control the size */
      --d: 15s;
      /* animation duration */
      display: grid;
      width: var(--s);
      aspect-ratio: 1;
      overflow: hidden;
      padding: calc(var(--s)/20);
      border-radius: 50%;
      position: relative;
      clip-path: circle(49.5%);
      /* to avoid a few glitch caused by overflow: hidden */
    }
    
    .gallery::after {
      content: "";
      position: absolute;
      inset: 0;
      padding: inherit;
      border-radius: inherit;
      background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
    }
    
    .gallery > img {
      grid-area: 1/1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
      transform-origin: 50% 196.1902200082%;
    }
    
    .gallery::after,
    .gallery > img {
      animation: m var(--d) infinite cubic-bezier(0.5, -0.2, 0.5, 1.2);
    }
    
    .gallery > img:nth-child(2) {
      animation-delay: calc(-0.1111111111*var(--d));
    }
    
    .gallery > img:nth-child(3) {
      animation-delay: calc(-0.2222222222*var(--d));
    }
    
    .gallery > img:nth-child(4) {
      animation-delay: calc(-0.3333333333*var(--d));
    }
    
    .gallery > img:nth-child(5) {
      animation-delay: calc(-0.4444444444*var(--d));
    }
    
    .gallery > img:nth-child(6) {
      animation-delay: calc(-0.5555555556*var(--d));
    }
    
    .gallery > img:nth-child(7) {
      animation-delay: calc(-0.6666666667*var(--d));
    }
    
    .gallery > img:nth-child(8) {
      animation-delay: calc(-0.7777777778*var(--d));
    }
    
    .gallery > img:nth-child(9) {
      animation-delay: calc(-0.8888888889*var(--d));
    }
    
    @keyframes m {
      0%, 3% {
        transform: rotate(0);
      }
      9.1111111111%, 14.1111111111% {
        transform: rotate(-40deg);
      }
      20.2222222222%, 25.2222222222% {
        transform: rotate(-80deg);
      }
      31.3333333333%, 36.3333333333% {
        transform: rotate(-120deg);
      }
      42.4444444444%, 47.4444444444% {
        transform: rotate(-160deg);
      }
      53.5555555556%, 58.5555555556% {
        transform: rotate(-200deg);
      }
      64.6666666667%, 69.6666666667% {
        transform: rotate(-240deg);
      }
      75.7777777778%, 80.7777777778% {
        transform: rotate(-280deg);
      }
      86.8888888889%, 91.8888888889% {
        transform: rotate(-320deg);
      }
      98%, 100% {
        transform: rotate(-360deg);
      }
    }
    body2 {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-content: center;
      background: #C2CBCE;
    }
    
    .carousel-inner > .item {
    
        -webkit-transition: 2s ease-in-out left;
    
        -moz-transition: 2s ease-in-out left;
    
        -o-transition: 2s ease-in-out left;
    
        transition: 2s ease-in-out left;
    
    }
    .carousel-showmanymoveone .carousel-control {
      width: 4%;
      background-image: none;
    }
    .carousel-showmanymoveone .carousel-control.left {
      margin-left: 15px;
    }
    .carousel-showmanymoveone .carousel-control.right {
      margin-right: 15px;
    }
    .carousel-showmanymoveone .cloneditem-1,
    .carousel-showmanymoveone .cloneditem-2,
    .carousel-showmanymoveone .cloneditem-3 {
      display: none;
    }
    .orange {
      font-family: 'Oswald', sans-serif !important;
      font-weight: 300;
      font-size: 20px;
      color: #ffa906;
    }
    .putih {
      font-family: 'Oswald', sans-serif !important;
      font-weight: 300;
      font-size: 20px;
      color: #fff;
    }
    .hijau {
      font-family: 'Oswald', sans-serif !important;
      font-weight: 300;
      font-size: 20px;
      color: #5cff00;
    }
    .hero-header {
        border: 1px solid rgba(0, 0, 0, .2);
        border-radius: 20px;
        outline: none;
        margin-bottom: 1rem;
        padding: 0 0 0 0;
        background: url(adm/POS/user/img/bg-circle.png), url(adm/POS/user/img/bg-triangle.png), url(adm/POS/user/img/bg-bottom.png), linear-gradient(to bottom right, #ffffffe3, #6560ffeb);
        background-position: left 0px top 0px, right 0px top 50%, center bottom;
        background-repeat: no-repeat;
    }
    .row-modal {
      margin-right: 5px;
      margin-left: 5px;
    }
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
      position: relative;
      min-height: 1px;
      padding-right: 5px;
      padding-left: 5px;
    }
    .modal-header-daftar {
      min-height: 16.428571429px;
      padding: 15px;
      border-bottom: 1px solid #e5e5e5;
    background: #fff0;
    }
    .modal-footer-daftar {
      padding: 19px 20px 20px;
      margin-top: 15px;
      text-align: right;
      border-top: 1px solid #e5e5e5;
    background: #fff0;
    }