body {
    background: url("../img/pattern.jpg");
    background-repeat: repeat;    
    color: rgb(253, 207, 80);
    font-size: 16px;
    font-family: Sagarmantha,'Times New Roman';
}
@font-face {
    font-family: Samargantha;
    src: url("../font/Sagarmatha\ Regular.otf") format("opentype");
}

@font-face {
    font-family: Samargantha;
    font-weight: bold;
    src: url("../font/Sagarmatha\ Regular.otf") format("opentype");
}
.home-box {
    background: linear-gradient(to bottom, #040401 25%, #16191e 50%);
}
.header-box {
    max-height: 200px;
}
.logo-img {
    max-width: 150px;
}
.logo, .banner {
    display: inline-block;
}
.cube {
    position: absolute;
    right : 10%;
    top : 0;
    font-size: 18px;
    width: 100px;
    height: 100px;
    text-align:center;
    transform-style: preserve-3d;
    transform: translateZ(-100px);
    transition: transform 1s;
}
  
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-position: 0 100%;
    background-size: 100% 400%;
    backface-visibility: hidden;
    transition: background-position 1s;
    font-size: 600%;
    color: #000;
}
  
.face:first-child {
    transform: rotateX(90deg) translateY(50%) rotateX(-90deg);
    background-image: linear-gradient(rgba(0,0,0,1) 10%, rgba(0,0,0,0) 66%);
}
.face:last-child {
    transform: translateY(50%) rotateX(-90deg) ;
    background-image: linear-gradient(rgba(0,0,0,0) 33%, rgba(0,0,0,1) 90%);
}
#red .face {
    background-color: #ef6434;    
}
.cube {
    animation: rotate 2s alternate infinite ease-in-out;
}
.cube .face {
    animation: shade 2s alternate infinite ease-in-out;
}
#countdown {
    margin-top: 35px;
}
.banner-img {
    max-height: 150px;
    width: 100%;
}
.logo {
    width: 25%;
    text-align: center;
}
.banner{
    width: 74%;
}
.navbar {
    text-align: center;
    margin-top: 20px;
    font-size: larger;
}
.navbar-toggler {
    background-color: #ddca1d;
    margin: 10px auto;
    color: black!important;
}
.navbar-toggler-icon {
    width: 100%;
    background-image: none!important;
    vertical-align: middle;
}
.navbar-collapse ~ .show {
    z-index: 999;
    background: black;
}
.navbar-toggler-icon p {
    margin: 0;
}
.content-box {
    margin: 20px auto;
}
.carousel-box, .livedraw-box {
    display: inline-block;
    vertical-align: top;
}
.carousel-box {
    width: 50%;
    padding: 30px 0;
}
.livedraw-box {
    width: 49%;
    text-align: center;
    padding: 20px;
}
#slider .carousel-inner {
    max-height: 450px;
}
#slider .carousel-item img {
    height: 450px;
    border-radius: 10%;
}
.livedraw-box thead th {
    background: none;
}
.livedraw-box-big {
    display: none;
    text-align: center;
    border: 2px solid #fff;
    padding: 25px 0;
    margin: 20px 0;
    font-size: larger;
    font-weight: bold;
    text-shadow: 2px 2px rgb(207, 101, 1);
}
.livedraw-num {
    width: 40px;
}
.table td p {
    display: block;
    margin-top: 20px;
}
.collapse.show {
    z-index: 999;
    background-color: #b06530;
}
.footer {
    text-align: center;
    font-weight: bold;
}
#last_result {
    text-align: center;
}
#last_result thead th, #last_result tr.odd td, #last_result tr.even td{
    background-color: transparent;
}
.content-box .livedraw-box-big thead th {
    background-color: transparent;
}
.content-box .livedraw-box-big {
    display: block;
}
.about-box {
    padding: 25px;
}
.about-box p {
    margin-bottom: 25px;
}

@media screen and (max-width : 767px) {
    .logo {
        width: 100%;
    }
    .banner {
        display: none;
    }
    .carousel-box {
        width: 100%;
        height: 300px;
    }
    .livedraw-box {
        width: 100%;
        margin-top: 30px;
    }
    #slider,.carousel-inner,#slider .carousel-item img{
        height: 300px;
    }
}
@media screen and (max-width : 433px) {
    .livedraw-num {
        width: 25px;
        vertical-align: middle;
    }
}
@media screen and (max-width : 395px) {
    .livedraw-num {
        width: 20px;
        vertical-align: middle;
    }
}
@media screen and (min-width : 1441px) {
    .cube {
        display: none;
    }
    .livedraw-box-big {
        display: block;
    }
}
@keyframes rotate {
    to { transform: translateZ(-100px) rotateX(90deg); }
}
@keyframes shade {
    to { background-position: 0 0 }
}