html {
    height: 100%
}


#game-container {
    margin: 0;
    padding-top: 15px;
    position: relative;
    z-index: 80;
    background-size: cover;
    background-position: center;
    height:100vh;
  background-repeat: no-repeat;
}
#game-container.container{
  width:100%;
}

#game-container-left {
    /*float: left;*/
    padding: 8px;
    background-image: url("../images/game-overlay.png");
    border-radius: 6px;
    position: relative
}

/*#game-container-left iframe {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    z-index: -1;
    display: block
}*/
iframe{
    max-width: 100%;
}

/*#game-container-left object {
    width: 100%;
    height: 100%;
    position: relative
}

#game-container-right {
    float: right;
    width: 260px
}
*/
#game-container-close {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 33px;
    height: 32px;
    background-image: url("../images/dialog-close.png");
    background-position: bottom center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 20;
    cursor: pointer
}

#game-container-close:hover {
    background-position: top center
}

#game-container-right-toggle {
    float: right;
    border-radius: 6px;
    background-image: url("../images/game-overlay.png");
    display: none;
    cursor: pointer
}

#game-container-right-toggle img {
    margin: 4px 8px;
    display: block
}

#fullscreen,
#hide-game-side,
#favourite {
    display: inline-block;
    margin: 10px 10px 0px 10px
}

#fullscreen:hover,
#hide-game-side:hover,
#show-game-side:hover,
#favourite:hover {
    opacity: 0.8;
    cursor: pointer
}

.game-container-right-box {
    width: 252px;
    margin-bottom: 15px;
    padding: 4px;
    border-radius: 6px;
    background-image: url("../images/game-overlay.png")
}

.game-container-right-box .inner {
    width: 232px;
    padding: 10px;
    background-color: #191919;
    border-radius: 6px;
    color: #b7b7b7;
    font-size: 10px;
    text-shadow: none
}

#game-supercharged-status-container {
    margin-top: 10px;
    text-align: center
}

#game-supercharged-status-container img {
    margin: 0px 5px;
    max-height: 30px
}

.progressbar-container {
    text-align: left;
    margin-top: 15px
}

.progressbar-container .left {
    float: left;
    margin: 0px 0px 0px 4px
}

.progressbar-container .right {
    float: right
}

.progressbar-container:not(.active):hover {
    opacity: 0.9;
    cursor: pointer
}

.progressbar {
    overflow: hidden;
    width: 100%;
    height: 18px;
    border-radius: 6px;
    border: 1px solid #484848;
    background-color: #3d3d3d;
    background-image: -webkit-linear-gradient(top, #3d3d3d, #484848);
    background-image: -moz-linear-gradient(top, #3d3d3d, #484848);
    background-image: -ms-linear-gradient(top, #3d3d3d, #484848);
    background-image: -o-linear-gradient(top, #3d3d3d, #484848);
    background-image: linear-gradient(to bottom, #3d3d3d, #484848)
}

.active .progressbar {
    border: 1px solid #113b5d;
    background-color: #0f314b;
    background-image: -webkit-linear-gradient(top, #0f314b, #18405c);
    background-image: -moz-linear-gradient(top, #0f314b, #18405c);
    background-image: -ms-linear-gradient(top, #0f314b, #18405c);
    background-image: -o-linear-gradient(top, #0f314b, #18405c);
    background-image: linear-gradient(to bottom, #0f314b, #18405c)
}

.progressbar .progressbar-bar {
    height: 100%;
    background-color: #7f7f7f;
    background-image: url("../images/progressbar.png")
}

.active .progressbar-bar {
    background-color: #1c99dc;
    background-image: url("../images/progressbar-active.gif")
}

.progress-title {
    color: #fff
}

.progress-percentage {
    background-color: #484848;
    border-radius: 6px;
    padding: 0px 3px;
    margin: 0px 0px 2px 0px
}

.active .progress-percentage {
    background-color: #0b78ce;
    color: #fff
}

.game-container-right-box .jcarousel,
.game-container-right-box .supercharged-list-entry {
    height: 40px;
    font-size: 11px
}

.supercharged-list-entry-left {
    width: 20%;
    height: 40px
}

.supercharged-list-entry p {
    width: 78%;
    text-align: left
}

.game-container-right-box .supercharged-list-entry .sep {
    display: none;
    height: 0px
}

.supercharged-list-entry .user-pic {
    height: 90%;
    width: auto;
    border: 1px solid #666
}

.supercharged-list-entry .arrow,
.supercharged-list-entry .game-pic {
    display: none
}

.game-container-right-box .jcarousel-recent-games-next,
.game-container-right-box .jcarousel-recent-games-prev {
    float: left;
    width: 19px;
    height: 19px;
    background-image: url("../images/jcarousel-recent-games.png");
    background-repeat: no-repeat;
    margin: 12px 0px 0px 5px;
    cursor: pointer
}

.game-container-right-box .jcarousel-recent-games-next {
    background-position: bottom;
    margin: 12px 5px 0px 0px
}

.game-container-right-box .jcarousel-recent-games {
    float: left;
    position: relative;
    overflow: hidden;
    height: 37px;
    width: 180px;
    margin-top: 5px
}

.jcarousel-recent-games ul {
    position: relative;
    width: 2000px;
    height: 37px;
    list-style: none;
    margin: 0;
    padding: 0
}

.jcarousel-recent-games li {
    float: left;
    width: 54px;
    height: 37px;
    margin: 0px 3px
}

.jcarousel-recent-games img {
    width: 100%;
    height: auto;
    border-radius: 6px
}

.white-box {
    /*width: 220px;*/
    margin-bottom: 15px;
    padding: 20px;
    border-radius: 6px;
    box-shadow: none;
    font-size: 12px
}

.white-box .sep {
    opacity: 0.3
}

.white-box h5 {
    color: #494949;
    text-shadow: 1px 1px 0px #fff
}

#game-offer {
    margin-top: -45px
}

#supercharged-list {
    margin-top: 0px;
    padding: 0px;
    height: 40px;
    overflow: hidden;
    padding: 20px
}

#supercharged-list .jcarousel,
#supercharged-list .supercharged-list-entry {
    height: 40px;
    font-size: 11px
}

#clock {
    display: none;
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 45px;
    height: 23px;
    border-radius: 5px;
    background-color: #343434
}

#clock ul {
    list-style: none outside none;
    float: right;
    margin: 8px 5px 0px 0px
}

#clock ul#topclock li#dc-colon {
    background: url("../images/digital-clock.png") repeat scroll 0 9px transparent;
    height: 9px;
    margin: 0 1px 0 0;
    overflow: hidden;
    text-indent: -99999em;
    width: 5px
}

#clock ul#topclock li {
    float: left;
    margin: 0 2px 0 0
}

#clock ul li {
    display: inline;
    float: left
}

#clock ul#topclock li.dc-0 {
    background: url("../images/digital-clock.png") repeat scroll 0 18px transparent;
    height: 9px;
    overflow: hidden;
    text-indent: -99999em;
    width: 5px
}

#clock ul#topclock li.dc-1 {
    background: url("../images/digital-clock.png") repeat scroll 0 0 transparent;
    height: 9px;
    overflow: hidden;
    text-indent: -99999em;
    width: 5px
}

#clock ul#topclock li.dc-2 {
    background: url("../images/digital-clock.png") repeat scroll 0 90px transparent;
    height: 9px;
    overflow: hidden;
    text-indent: -99999em;
    width: 5px
}

#clock ul#topclock li.dc-3 {
    background: url("../images/digital-clock.png") repeat scroll 0 81px transparent;
    height: 9px;
    overflow: hidden;
    text-indent: -99999em;
    width: 5px
}

#clock ul#topclock li.dc-4 {
    background: url("../images/digital-clock.png") repeat scroll 0 72px transparent;
    height: 9px;
    overflow: hidden;
    text-indent: -99999em;
    width: 5px
}

#clock ul#topclock li.dc-5 {
    background: url("../images/digital-clock.png") repeat scroll 0 63px transparent;
    height: 9px;
    overflow: hidden;
    text-indent: -99999em;
    width: 5px
}

#clock ul#topclock li.dc-6 {
    background: url("../images/digital-clock.png") repeat scroll 0 54px transparent;
    height: 9px;
    overflow: hidden;
    text-indent: -99999em;
    width: 5px
}

#clock ul#topclock li.dc-7 {
    background: url("../images/digital-clock.png") repeat scroll 0 45px transparent;
    height: 9px;
    overflow: hidden;
    text-indent: -99999em;
    width: 5px
}

#clock ul#topclock li.dc-8 {
    background: url("../images/digital-clock.png") repeat scroll 0 36px transparent;
    height: 9px;
    overflow: hidden;
    text-indent: -99999em;
    width: 5px
}

#clock ul#topclock li.dc-9 {
    background: url("../images/digital-clock.png") repeat scroll 0 27px transparent;
    height: 9px;
    overflow: hidden;
    text-indent: -99999em;
    width: 5px
}


/*---Design by Zi---*/
.csslider-outer > input {
    display: none;
}
.span_1_of_6 {
    width: 15.5%;
}
.col {
    position: relative;
    display: block;
    float: left;
    margin: 1% 0 0.5% 1%;
}
.csslider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.game-thumb-inner > a:first-of-type {
    display: block;
    width: 100%;
    height: 100%;
}
.game-thumb-inner {
    float: left;
    width: 96%;
    height: 96%;
    overflow: hidden;
    position: absolute;
    top: 2%;
    left: 2%;
    border-radius: 6px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.game-thumb-inner::before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../images/game-thumb-default.jpg");
    z-index: -1;
}
.game-thumb-inner-content {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/game-thumb-inner-content.png");
    background-repeat: repeat;
    overflow: hidden;
    z-index: 1;
}
.game-thumb-inner:hover .game-thumb-inner-content {
    display: block;
}
.game-thumb {
    display: block !important;
    border-radius: 6px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: relative;
    padding-top: 65%;
    vertical-align: middle;
    transform: translateZ(0);
}
.game-thumb-inner-content .play-arrow {
    position: absolute;
    left: 33.5%;
    top: 27%;
    width: 30%;
}
#games-non-logged-in {
    position: relative;
    width: 100%;
    padding: 1% 0%;
    z-index: 10;
    margin-top: 10px;
    font-size: 13px;
    color: #393939;
    line-height: 107%;
    text-align: center;
    margin-bottom: 35px;
}
#games-non-logged-in p b{
    text-transform: capitalize;
    font-weight: bold !important;
    font-size: 13px !important; 
}
.blue-button {
    border: none;
    text-shadow: 1px 1px 0px #065395;
    display: inline-block;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    background: #2473dc;
    color: #fff;
    box-shadow: 0 3px #003e7e;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    font-size: 22px;
    padding: 10px 33px 9px 33px;
    border-radius: 6px;
}
.blue-button:hover{
    color: #23527c;
}

/* Responsive Design */
@media (max-width: 767px) {

.col.span_1_of_6{
    width: 32%;
}

}

@media (max-width: 689px){


}

@media (max-width: 480px) {

.col.span_1_of_6{
    width: 49%;
}

}