.flipbox-wrapper {perspective: 800px; perspective-origin: 50% 50%;}
.flipbox-wrapper .flipbox-box {position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition-property: transform;}
.flipbox-wrapper .flipbox-box .flipbox-side {position: absolute; width: 100%; height: 100%; backface-visibility: hidden;}
.flipbox-wrapper .flipbox-box .flipbox-side.flipbox-front {transform: translateZ(0);}
.flipbox-wrapper .flipbox-box .flipbox-side.flipbox-left {transform-origin: center left;}
.flipbox-wrapper .flipbox-box .flipbox-side.flipbox-right {transform-origin: top right;}
.flipbox-wrapper .flipbox-box .flipbox-side.flipbox-top {transform-origin: top center;}
.flipbox-wrapper .flipbox-box .flipbox-side.flipbox-bottom {transform-origin: bottom center;}

/*===================================================*/
/* custom style -----Dunya News----------- 22-04-2019*/
/*===================================================*/
html {overflow: hidden;}
body {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    background-color: #fafafa;
}


.item {
    display: inline-block;
    /* margin: 30px 40px;*/
    margin: 0;
    text-align: center;
    vertical-align: top;
    font-size: 0;
}

.box {
    width: 300px;
    height: 150px;
    margin:0;
    font-size: initial;
}

.box .side {
    /* line-height: 280px; */
    font-size: 1em;
    font-weight: normal;
    color: #fff;
    text-align: center;
    user-select: none;
}

.box .side.side1 {
    /* background-color: #0099C6; */
    background-color: #097699;
    height: 150px;
}

.box .side.side2 {
    /* background-color: #6209a1; */
    background-color: #5d2f7e;
    height: 150px;
}

.box .side.side3 {
    /* background: #04803d; */
    background-color: #0e6938;
    height: 150px;
}

.box .side.side4 {
    /* background: #8d053f; */
    background-color: #72304c;
    height: 150px;
}

.box .side.side5 {
    background: #990099;
    
}

.box .side.side6 {
    background: #3B3EAC;
}

.box .side.side7 {
    background: #0099C6;
}

.box .side.side8 {
    background: #DD4477;
}





.box .side table { width: 100%; padding-bottom: 10px; border-collapse: collapse; margin:10px 0;}
.box .side table th {border-bottom: 1px solid #fff;}
/* .box .side .g_date{ font-size: 1.2em; text-align: center;  padding: 5px 0;} */
.box .side .islamic_date{ font-size: 1em; text-align: center;  padding: 5px 0;}
.g-header-1{width: 100%; height: 50px; background-image: url(../img/waqat-e-iftar-hanfia-2.jpg); background-size: cover;}
.g-header-2{width: 100%; height: 50px; background-image: url(../img/waqat-e-iftar-jafria-2.jpg); background-size: cover;}
.g-header-3{width: 100%; height: 50px; background-image: url(../img/waqat-e-sahar-hanfia-2.jpg); background-size: cover;}
.g-header-4{width: 100%; height: 50px; background-image: url(../img/waqat-e-sahar-jafria-2.jpg); background-size: cover;}
.ad-slide{width: 300px; height: 150px; background-image: url(../img/flipper-ad.jpg); background-size: cover;}


.ramadan_date{display: none;}
@media only screen 
and (max-device-width: 767px) 
/* and (orientation : landscape) */
{ 
    .box { height: 100px;}
    .box .side table { width: 100%; padding-bottom: 5px; border-collapse: collapse; margin:5px 0;}
    .box .side table th {border-bottom: 1px solid #fff; font-size: 0.7em;}
    .box .side table td {font-size: 0.7em;}
    .box .side .islamic_date{ font-size: 0.8em; text-align: center;  padding: 2px 0;}

    .box .side.side1 {height: 75px;}
    .box .side.side2 {height: 75px;}
    .box .side.side3 {height: 75px;}
    .box .side.side4 {height: 75px;}

    .g-header-1{width: 100%; height: 30px; background-image: url(../img/waqat-e-iftar-hanfia-mob-3.jpg); background-size: cover;}
    .g-header-2{width: 100%; height: 30px; background-image: url(../img/waqat-e-iftar-jafria-mob-3.jpg); background-size: cover;}
    .g-header-3{width: 100%; height: 30px; background-image: url(../img/waqat-e-sahar-hanfia-mob-3.jpg); background-size: cover;}
    .g-header-4{width: 100%; height: 30px; background-image: url(../img/waqat-e-sahar-jafria-mob-3.jpg); background-size: cover;}
    .ad-slide{width: 300px; height: 75px; background-image: url(../img/flipper-ad-mob.jpg); background-size: cover;}

    .ramadan_date{display: block; line-height: 1.8; text-align: left; padding-left: 10px;}
    .islamic_date {display: none;}


}