.img-box {
    display: table-row;
    width: 100%;
    height: calc(100vh);
}

.img-ad {
    display: table-cell;
    vertical-align: middle;
}

.img-display {
    width: 100%;
}

.qbayar-popup-bg-color {
    color: #ffffff;
    background-color: #2F354D;
}
.qr-code-frame {
    display: inline-block;
    background-color: #fff;
    padding: 15px;
    width: 70%;
}
.qr-code {
    width: 70%;
    max-width: 300px;
}
.qr-code-timeout-msg {
    font-size: 2em;
    color: #ff9999;
}
#popup-duitnow-payment .qr-code {
    width: 100%;
    max-width: 300px;
    object-fit: contain;
}
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gothamrounded-bold.otf'),
        url('../fonts/gothamrounded-bold.ttf');
    font-weight: 700;

  }
.qr-payment-info-frame {
    /* max-width:270px; */
    width:70%;
    margin: auto;
}
.qr-payment-info-frame img{
    padding: 20px;
    border-top: 10px solid #ED2E67;
    border-left: 10px solid #ED2E67;
    border-right: 10px solid #ED2E67;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #FFFFFF;
}
.qr-payment-info-frame-caption {
    font-family: 'Gotham';
    background: #ED2E67;
    font-size: 15px;
    padding: 10px;
    color: #FFFFFF;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


/* ------------------------------------------- Animation - slide left/right */
.img-move-leftToRight {
    -webkit-animation: leftToRight 8s;
    animation: leftToRight 8s;
}
.img-move-rightToLeft {
    -webkit-animation: rightToLeft 8s;
    animation: rightToLeft 8s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes leftToRight {
    0%   {margin-left: -100%; opacity: 0.2}
    10%  {margin-left: 0; opacity: 0.6}
    15%  {margin-left: 0; opacity: 1}
    100% {margin-left: 0}
}
/* Standard syntax */
@keyframes leftToRight {
    0%   {margin-left: -100%; opacity: 0.2}
    10%  {margin-left: 0; opacity: 0.6}
    15%  {margin-left: 0; opacity: 1}
    100% {margin-left: 0}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes rightToLeft {
    0%   {margin-left: 100%; opacity: 0.2}
    10%  {margin-left: 0; opacity: 0.6}
    15%  {margin-left: 0; opacity: 1}
    100% {margin-left: 0}
}
/* Standard syntax */
@keyframes rightToLeft {
    0%   {margin-left: 100%; opacity: 0.2}
    10%  {margin-left: 0; opacity: 0.6}
    15%  {margin-left: 0; opacity: 1}
    100% {margin-left: 0}
}


/* ------------------------------------------- Animation - zoom in/out */
.img-zoom-in {
    -webkit-animation: zoomIn 8s infinite;
    animation: zoomIn 8s infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes zoomIn {
    0%   {margin-left: 0;  opacity: 0; width: 100%;}
    30%  {margin-left: 0; opacity: 1; width: 100%;}
    90%  {margin-left: 0; opacity: 1; width: 100%;}
    98%  {margin-left: 0; opacity: 0; width: 100%;}
    100% {margin-left: 0; opacity: 0; width: 100%;}
}
/* Standard syntax */
@keyframes zoomIn {
    0%   {margin-left: 0;  opacity: 0; width: 100%;}
    30%  {margin-left: 0; opacity: 1; width: 100%;}
    90%  {margin-left: 0; opacity: 1; width: 100%;}
    98%  {margin-left: 0; opacity: 0; width: 100%;}
    100% {margin-left: 0; opacity: 0; width: 100%;}
}