/* montserrat-regular - latin */
@font-face {
    font-display:swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/montserrat-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/montserrat-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-italic - latin */
@font-face {
    font-display:swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/montserrat-v15-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/montserrat-v15-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-500 - latin */
@font-face {
    font-display:swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/montserrat-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/montserrat-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* montserrat-600 - latin */
@font-face {
    font-display:swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/montserrat-v15-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/montserrat-v15-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-700 - latin */
@font-face {
    font-display:swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/montserrat-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/montserrat-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-800 - latin */
@font-face {
    font-display:swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src:url('fonts/montserrat-v15-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/montserrat-v15-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-800italic - latin */
@font-face {
    font-display:swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 800;
    src: local(''),
    url('fonts/montserrat-v15-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/montserrat-v15-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
    color: var(--text-blue);
    font: 400 14.5px/24px Montserrat, sans-serif;
    transition: background-color 1s ease-out;

    /*background-color: #e4e8f2;
    background-repeat: repeat;
    background-image: url(../../images/pattern-bg-new.png);
    background-repeat: repeat-x;
    background-position: center 0, 0 0, 0 0;*/
}

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

input:focus{outline: none;}

h1,
h2,
h3 {
    font-size: 1.5em;
    color: var(--text-blue);
}

.container {
    background-color: #eaeff5;
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    background: url(../../images/svgbkg.svg) top repeat;
    background-size: cover;
}

#footer{
    width: 100%;
}

#footer,
.social-button,
{
    text-align: center
}


h2,
h3,
h4 {
    font-weight: bolder;
    color: #005680;
    line-height: normal
}


pre {
    font-size: 1.5em;
    white-space: pre-wrap;
    /* css-3 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
}

.left {
    float: left
}

.right {
    float: right
}

.clear,
.clearfix {
    float: none;
    clear: both;
    display: block;
}

.right-pos {
    right: 0
}

#footer
{
    float: left
}

a {

    font-style: normal;
    color: #004993;
    border-style: none
}

a, a:hover {
    text-decoration: none
}


h4 {
    font-size: 1.3em
}

.header,
.header_first,
h2.header,
h3.header {
    color: #613f3f;
    font-weight: 100;
    clear: both
}

li,
ol li,
ul li {
    PADDING-LEFT: 0;
    background-repeat: no-repeat;
    background-position: 0 0;
    list-style-type: none
}

.fl-c{
    display: flex;
    align-items: center;
}

.hw {
    background-color: #635482;
    z-index: 10010;
    width: 100%;
    position: fixed;
    border-bottom: 4px solid #40404f;
    transition: all 255ms
}

.gridC {
    display: grid;
    grid-template-rows: repeat(auto-fill, var(--gccolh));
    grid-gap: var(--gcgap, 16px);
    grid-auto-flow: row dense;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, var(--gccolw));
    padding: 0;
    margin-bottom: 30px;
}


.grd{
    display: grid;
    grid-template-rows: repeat(auto-fill, var(--gcolh, 80px));
    /*grid-gap: var(--ggap, 16px);*/
    grid-row-gap : var(--growgap);
    grid-column-gap : var(--gcolgap);
    
    grid-auto-flow: row dense;
    justify-content:center;
    grid-template-columns: repeat(auto-fill, var(--gcolw, 120px));
    margin-bottom: 30px;
}

.gr-s21{
    grid-column-start: span 2;
    grid-row-start: span 1;
}
.gr-s22{
    grid-column-start: span 2;
    grid-row-start: span 2;
}
.gr-s32{
    grid-column-start: span 3;
    grid-row-start: span 2;
}

.gr-s23{
    grid-column-start: span 2;
    grid-row-start: span 3;
}
.gr-s33{
    grid-column-start: span 3;
    grid-row-start: span 3;
}
.gr-s75{
    grid-column-start: span var(--gameSpanC);
    grid-row-start: span var(--gameSpanR);
}
.gr-s61{
    grid-column-start: span 6;
    grid-row-start: span 1;
}
.gr-s71{
    grid-column-start: span 7;
    grid-row-start: span 1;
}
.gr-s92{
    grid-column-start: span 8;
    grid-row-start: span ;
}

.gr-all{grid-column: 1/-1;}

.span4 {
    position: relative;
    transition: all .2s linear;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .34);
    border-radius: 10px;
    grid-column-start: span 2;
    grid-row-start: span 2;
    min-height: calc(var(--gcolh)*2 + var(--ggap));
    /*min-height :176px;*/
}

.gridC .span4
{
    grid-column-start: span 1;
    grid-row-start: span 1;    
    min-height: var(--gcolh);
}

.gridC .cat-title {
    font-weight: 600;
    line-height: inherit;
    font-size: 0.9em;
    padding: 5px 3px;
    background-color: #2c2e3680;
    color: #ffffff;;
}

.span2 {
    height: 100%;
    width: 100%;
    box-shadow: 0 6px 12px 0 rgba(0,0,0,.24);
    border-radius:10px;
    transition: all .2s linear;  
    position: relative;
    min-height: var(--gcolh, 105px);
    min-width: var(--gcolw, 105px);
}


.span2:hover {

    -ms-transform: scale(1.034) translate3d(0,3px,0);
    -webkit-transform: scale(1.034) translate3d(0,3px,0);  
    transform: scale(1.034) translate3d(0,3px,0);
    transition-duration: .2s;
}

.span2:after {
    content: "";
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#44222254 0%,rgb(0 0 0 / 0%));
    z-index: 2;
    z-index: 1001;
    transition: all .3s ease;
    transition-property: opacity;
    transition-delay: .1s;
    border-radius: 10px;
}

.span2:hover:after {
    opacity: 1;
    box-shadow: 0 8px 8px 0 rgba(0,0,0,.35);
}

.span2:hover .game-title {
    opacity:1;
    visibility: visible;
}

.hc {
    height: 40px;
    display: flex;
    align-items: stretch;
    justify-items: center;
    justify-content: flex-end;

}

.header_first {
    padding: 10px 10px 0px
}

.header_first .right {
    padding-top: 3px
}


#logo{margin-left: 10px;margin-right: auto;}

.mc {
    margin: auto ;
    background-color: #FFF;
    width: 100%
}

#footer {
    background-color: #163247;
    padding: 15px 0;
    color: #d6d7d9;
}

.footer-header {
    padding: 5px 10px
}

.footerbotom p {
    clear: both;
    margin: 4px 14px
}

.footerbotom a {
    color: #fff;
    cursor:pointer;
    font-size: 600;
    text-decoration: underline;
    margin-left: 10px;
}

.social-icons {
    float: right
}

.item img,
.social-button {
    float: left
}

.social-button {
    width: 33px;
    height: 33px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    line-height: 32px;
    opacity: .8
}

.social-button:hover {
    opacity: 1
}

.social-button svg {
    display: inline-block;
    max-height: 18px;
    vertical-align: middle
}

.social-button.instagram,
.social-button.twitter {
    background: #55acee
}

.social-button.facebook {
    background: #15324c
}

.svg-white .svg-color {
    fill: #fff
}

.cnt_description {
    padding: 10px;
    margin: 10px
}

.cnt_description img {
    float: left;
    margin: 0 10px 5px 5px;
    border: 1px solid #D8CDCD;
    padding: 3px
}

.box {
    border-style: solid;
    background-color: #F8F7F7;
    border-width: 2px 1px 1px;
    border-color: #A3AA88 #C7CBB6 #C7CBB6
}
.box h2            
{
    text-decoration: underline;
    color: var(--hepy-blue-1);
}
.box h3
{
    padding: 15px 0px;
}

.item {
    padding: 12px 4px;
    height: 120px;
    border-bottom: 1px solid #D9D0D0
}

.item img {
    margin: 3px 12px 0 0
}

.item a {
    font-size: 1.4em
}

.header
{
    padding: 15px 0 0 10px;
    font-size: 2em
}

.games_similar_side li.span2 {
    width: 100%;
    margin-bottom: 13px;
}

.mmorpg {
    height: 170px;
    overflow: hidden
}

.mmorpg .span2 {
    width: 210px;
    height: 180px;
    margin: 7px;
    display: block
}


.span2 img, .span4 img{
    display: block;   
    width: 100%;
    height: 100%;
    border-radius:10px;
}

.bagde-new {
    position: absolute;
    top: 2px;
    left: 2px;
    background-color: navy;
    color: #fff;
    padding: 0px 7px;
    font-size: 1.1em;
    border-radius: 3px 0;
}

.isotope-tray {
    clear: both;
    margin: 0 0 15px;
    width: 100%;
}

#games-mmo {
    background-color: #7D7373;
    margin: 0;
    padding: 10px 0;
    width: 100%;
    position: relative;
    overflow: hidden
}

#games-mmo .header,
#played .header {
    background: 0 0
}

#idSticky{
}
.sticky
{
    position: fixed;
    top: 50px;
    margin-top: 0px;
    z-index:100;
    width: var(--gamePadRight);
}

.ads-block-adaptabile {
    margin: 15px 0px;
    /*padding: 25px 1.5%;*/
    text-align: center;
    clear: both;
}


.adsW
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.adsRight{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column-start: span var(--adsSpanC);
    grid-row-start: span var(--adsSpanR);
    grid-column-end: -1;    
    width: calc(var(--gcolw)*var(--adsSpanC) + var(--gcolgap)*var(--adsSpanC) - var(--gcolgap)) ;
    
}
.adsRight300
{

    display: flex;
    justify-content: center;
    align-items: center;
    grid-column-start: span 3;
    grid-row-start: span 5;    
}

.ad300 div:nth-child(2) {
    margin-top: 10px;
}
.ad300 div.sticky
{
    margin-top: 0px;
}
.sidebar .adsRight {
    position: absolute;
    width: var(--gamePadRight);
    top: 0;
    bottom: 0;
    right: 0;
    text-align: center;   
}

.sidebar .ad300{
   /* height: 900px; */
    width: 336px;
}

.ad300{
    /*height: 600px;  */
    width: 336px;
}
.ad160{
    height: 600px;
    width: 160px
}


.categ_list .item_cat .wc {
    width: 670px
}

.categ_list .item_tags .wc {
    width: 990px
}

.categ_list .item_sites img {
    width: 20px;
    height: 15px;
    vertical-align: middle;
    margin-right: 7px
}

.categ_list .item_cat .wc {
    width: 200px
}

.categ_list .item_tags .wc {
    width: 157px;
    padding: 3px 0;
    margin-left: 7px
}

.categ_list .item_sites {
    background: 0 0;
    height: 100%
}

.loading {
    height: 20px;
    background: url(../../images/load_more.gif) 50% 50% no-repeat
}

ul.toolbar,
ul.toolbar li a {
    background-repeat: no-repeat
}

.voted {
    color: #999
}

.thanks {
    color: #36AA3D
}

.static {
    color: #5D3126
}

.gc {
    position: relative;
    background-color: #EFF2F8;
    box-shadow: 0 7px 14px 0 rgba(0,0,0,.3);

    display: flex;
    justify-content: center;
    
    height: 100%;
    width: 100%;
    height: var(--gameH ,589px);
    width: var(--gameW ,831px);
    margin: 0 auto;
}

/*#mainPreroll{
    position: absolute;
    display: block;
    background-color: black;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    max-width: 100%;
}

#mainPreroll {
    position: relative;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
}

#content{
    position: absolute;
    top: 0px;
    left: 0px;
    right :0;
    bottom: 0;
   
    border: 0;
    height: auto;
    max-width: 100%;
}
.mobile-game #mainPreroll {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10005;
}
*/


.pc{
    z-index: 9999999;
    overflow: hidden;
    position: absolute;
    position: fixed;
    
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-inner{
    background: #000;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    
    /*opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;*/
}

#mainPreroll {
    position: relative;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
}


#adContainer, #contentElement {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/*#adContainer {
    position: absolute;
    top: 0;
    left: 0;
    right :0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

#adContainer iframe {    
    width: 100%;
    height: 100%;
}

#contentElement
{
    width: 100%;
    height: 100%;  
    overflow: hidden;
}*/

.gameplay{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
}

.gameContent{
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    flex-direction: column;
    flex-grow: 0;   
}


.game_info {
    text-align: left;
    padding: 6px;
    background-color: #F5F5F5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08);

}

.AdsBoxRgt,
.AdsLongBox,
.pager,
.pagination {
    text-align: center
}

.game_info .game_rater {
    display: inline-block
}

.game_info .game_rater .raterblock {
    float: left
}

.game_info .game_rater .ratingblock {
    margin: 5px 0
}

.game_info .game_social {
    float: right;
    margin-top: 5px;
    margin-right: 10px
}

.game_info .game-views {
    float: left;
    font-size: 1.2em;
    padding: 0 5px;
    margin-right: 10px;
    border-right: 1px solid #B6A5A5;
    margin-top: 5px;
    text-align: center;
    background-image: none
}

.game_info .game-views span {
    display: block
}

ul.toolbar {
    height: 38px;
    height: 24px;
    background-position: 0 0;
    margin: 0 2px 0 5px;
    float: left;
    padding-left: 5px
}

ul.toolbar li {
    float: left;
    padding: 0;
    margin: 0;
    border: none;
    width: 32px;
    height: 24px;
    background-image: none;
    font-size: .9em;
    list-style-type: none
}

ul.toolbar .game-fb-like {
    margin-top: 2px;
    width: 130px
}

ul.toolbar .game-tweet {
    margin-top: 2px;
    width: 85px
}

ul.toolbar .game-plusone {
    margin-top: 2px;
    width: 60px
}

ul.toolbar li a {
    display: block;
    height: 38px;
    background-position: right 0;
    padding-top: 40px;
    padding-right: 2px;
    padding-bottom: 0;
    overflow: hidden
}

ul.toolbar li a.last {
    background: 0 0;
    padding-right: 0
}

.subcategories {
    display: none;
    top: 25px;
    padding: 5px 0;
    position: absolute;
    background: #F0EAE5;
    z-index: 100;
    border: 1px solid #B69898;
    border-top: none;
    border-radius: 0 4px 4px;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 1px 1px 6px rgba(0, 0, 0, .7);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 1px 1px 6px rgba(0, 0, 0, .7);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 1px 1px 6px rgba(0, 0, 0, .7)
}

.subcategories .withchild {
    width: 220px;
    padding: 5px
}

.AdsLongBox {
    margin: 0px auto 35px;
    width: 728px
}

.AdsLongBox img {
    margin-left: 10px
}

#subcat-sort {
    margin-top: 15px
}

#subcat-sort li {
    display: inline-block;
    position: relative;
    margin: 0 2px 5px;
    padding: 1px 5px;
    border: 1px solid #b0a9a9;
    border-radius: 5px;
    background-color: #f3f0f0
}

#subcat-sort li.tagTitle {
    display: block;
    padding: 0 0 4px;
    border: none;
    border-bottom: 1px solid #BDB0B0;
    margin-bottom: 9px
}

.search-right {
    float: right;
    width: 103px
}

.search-submit {
    background: #8DC515;
    border: 1px solid #699818;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 1.3em;
    font-weight: 700;
    height: 31px;
    text-shadow: 0 0 10px rgba(0, 0, 0, .72);
    text-transform: uppercase;
    vertical-align: top;
    width: 110px;
    -webkit-appearance: none
}

.search-input {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    color: #4f3e3e;
    height: 28px;
    line-height: 28px;
    padding: 0 0 0 8px;
    margin-right:5px;
}

.search-submit:hover {
    -moz-box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 1);
    -webkit-box-shadow: inset 0 0 2px 1px #FFF;
    box-shadow: inset 0 0 2px 1px #FFF
}

#suggestions {
    position: absolute;
    display: none;
    z-index: 50020;
    background-color: #fff;
    text-align: left;
    font-size: 1.2em;
    right: 0
}

#searchresults {
    width: 508px;
    background-color: #a0a0a0;
    font-size: 1em;
    line-height: 16px;
    border: 2px solid #7275B3
}

#searchresults a {
    display: block;
    background-color: #EFF2F7;
    clear: left;
    height: 60px;
    line-height: inherit;
    font-size: 1em
}

#searchresults a:hover {
    background-color: #81B187;
    color: #fff
}

#searchresults a img {
    float: left;
    padding: 1px;
    width: 50px;
    height: 45px;
    border: 1px solid #C5A1A1;
    background: #FCF8F8;
    margin: 5px 8px
}

#searchresults a span.searchheading {
    display: block;
    font-weight: 700;
    padding-top: 5px;
    color: #191919
}

#searchresults a span.searchheading span.views {
    font-weight: 400;
    padding-top: 5px;
    color: #666
}

#searchresults a:hover span.searchheading {
    color: #fff
}

#searchresults a span {
    color: #555;
    font-weight: 400
}

#searchresults a:hover span {
    color: #f1f1f1
}

#searchresults span.category {
    font-size: 1.1em;
    padding: 5px 8px;
    display: block;
    color: #fff;
    border-bottom: 1px solid #333
}

#searchresults span.seperator {
    float: right;
    padding-right: 15px;
    margin-right: 5px;
    background-image: url(../images/shortcuts_arrow.gif);
    background-repeat: no-repeat;
    background-position: right
}

#searchresults a,
#searchresults a span.searchheading span.views,
.categ_list .wc a,
.module-tabs li a,
.pager a,
.span2:hover,
.unit-rating li a,
.owl-carousel,
.owl-carousel .owl-item {
    -webkit-tap-highlight-color: transparent
}

#searchresults span.seperator a {
    background-color: transparent;
    display: block;
    margin: 5px;
    height: auto;
    color: #fff
}

.register-form label {
    display: block;
    float: left;
    width: 110px;
    margin: 6px 20px 0 0
}

.register-form input.login {
    float: left;
    width: 516px
}

.thumbnail a {
    position: absolute;
    z-index: 1000;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden
}

.thumbnail .details .title {
    display: block;
    overflow: hidden
}



.games_similar_side .span2 {
    width: 100%;
    margin: 0 0 8px;
    min-width: inherit
}

.games_similar_side .span2:hover {
    /*transform: none*/
}

.games_similar_side .span2_1 {
    width: 115px;
    height: 85px;
    margin: 0 6px 19px
}

.games_similar_side_small .span2 {
    width: 115px;
    height: 85px;
    margin: 0 0 15px
}

.brief {
    padding: 8px 15px 8px 0;
    color: #000;
}

.brief h1 {
    float: left;
    margin-right: 20px;
    margin-left: 10px;
    padding-top: 10px;
    height: 40px
}

.brief_info {
    line-height: 25px;
    font-size: 1.1em;
    padding: 15px 0;
    border-bottom: 1px solid #888090
}

.brief div.left {
    width: 80%
}

.btn-group {
    margin-left: 8px;
    float: left
}

.btn-group .btn:first-child {
    margin-left: 0;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-left-radius: 4px
}

.btn-group .btn {
    position: relative;
    float: left;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    padding: 0
}

.btn a {
    color: #FFF
}

.btn {
    cursor: pointer;
    padding: 5px 14px 3px;
    color: #333;
    border: 1px solid #CCC;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: .1s linear all;
    -moz-transition: .1s linear all;
    -ms-transition: .1s linear all;
    -o-transition: .1s linear all;
    transition: .1s linear all;
    margin-left: 20px
}

.btn-blue {
    background-color: #6c5d8a
}

.btn.active,
.btn:hover {
    background-color: #3c2f85
}

.sidebar .gw{
    padding-right: var(--gamePadRight);   
}

.gw{
    position: relative;
    max-width: 94em;
    margin: 0 auto;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

#game-header .game-nav-group {
    padding-bottom: 5px
}

#game-header .ratingblock {
    margin: 0 0 8px;
    padding-left: 8px
}

#game-header ul.toolbar {
    margin-left: 15px;
    height: 20px;
    float: none
}

#game-header .ratingblock p,
#game-header .voted {
    display: inline-block;
    padding-top: 5px;
    vertical-align: top;
    padding-left: 5px
}



#tabsCategFilter .wc {
    width: 440px
}

#tabsCategFilter .bigdiv {
    left: auto;
    right: 0;
    top: 30px
}

.game-info-head {
    background: #FFF;
    padding: 20px;
   
}
.game-info-head.nopad{padding: 0px;}

.game-info-head .game-icon {
    float: left;
    margin: 5px 15px 0 0
}

.game-info-head .game-icon img {
    padding: 3px;
    width: 160px;
    border: 1px solid #9393A7;
    background-color: #FFF
}

.game-info-head .title {
    margin-top: 5px;
    border-bottom: 1px solid #CAC6C6;
    margin-bottom: 10px;
    color: #000
}

.gamenew_ {
    background-color: #DCDCE0;
    border-color: #826BBC
}

#skin-wide .cnt_wrapper_centru {
    width: inherit
}

#skin-large .cnt_wrapper_centru {
    width: 585px
}

#skin-large .cnt_wrapper_right {
    width: 330px
}

.top_nav {
    margin: 0;
    display: flex;
    align-items: stretch;
}

.top_nav .flag {
    line-height: 50px;
    padding: 1px
}

.top_nav a:hover {
    background-color: #1f1d24
}

.bread {
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
}

.bread li {
    float: left;
}

.bread li.last {
    margin-top: 0
}

.bread li a {
    color: #F6F2F2;
    font-weight: 400
}

.bread h2 {
    color: #FFF;
    font-size: 1em
}

.bread span {
    margin: 0 7px
}

a.next,
a.prev {
    background: url(../../images/miscellaneous_sprite.png) no-repeat;
    width: 45px;
    height: 50px;
    display: block;
    position: absolute;
    top: 55px
}

a.prev {
    left: 5px;
    background-position: 0 0
}

a.prev:hover {
    background-position: 0 -50px
}

a.prev.disabled {
    background-position: 0 -100px!important
}

a.next {
    right: 5px;
    background-position: -50px 0
}

a.next:hover {
    background-position: -50px -50px
}

a.next.disabled {
    background-position: -50px -100px!important
}

a.next.disabled,
a.prev.disabled {
    cursor: default
}

a.next span,
a.prev span {
    display: none
}

.pagination a {
    background: url(../images/miscellaneous_sprite.png) 0 -300px no-repeat;
    width: 15px;
    height: 15px;
    margin: 0 5px 0 0;
    display: inline-block
}

.pagination a.selected {
    background-position: -25px -300px;
    cursor: default
}

.pagination a span {
    display: none
}

#wrapper3 {
    box-shadow: 0 0 10px #333;
    position: relative;
    overflow: hidden;
    clear: both;
    margin: 8px 3px;
    background-color: #ae9d9d;
    padding: 8px 0 3px
}

.carousel3 a {
    height: 280px;
    float: left;
    background-color: #fff;
    border: 1px solid #000
}

.pager {
    margin: 0 auto;
    padding: 8px 0 0;
    z-index: 10
}

.pager a {
    background-color: #000;
    border-radius: 50%;
    text-indent: -999px;
    display: inline-block;
    overflow: hidden;
    width: 12px;
    height: 12px;
    margin: 0 5px 0 0;
    border: 1px solid #EFE2E2
}

.pager a.selected {
    background-color: #E3E5E6;
    border-color: #000;
    text-decoration: underline
}

#veediFixed,
.loading-bar,
.menu-left a:hover,
.videos a {
    text-decoration: none
}


.loading-bar {
    background: #FFF;
    border: 1px solid #a7a7a7;
    color: #666;
    display: block;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    margin: auto auto 10px;
    text-align: center;
    width: 300px;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    text-shadow: 0 0 8px rgba(255, 255, 255, .62);
    clear: both;
    cursor: pointer
}

.load_spin,
.user .image {
    background-repeat: no-repeat
}

.load_spin {
    background-image: url(../images/load_more.gif);
    background-size: 45px 30px;
    background-position-y: 7px;
    background-position-x: 7px
}

.user {
    height: 50px;
    margin-left: 30px
}

.user .action {
    position: relative;
    float: left;
    display: flex;
    align-items: center;
    height: 50px;
    margin: 0 5px
}

.user .image {
    float: left;
    width: 35px;
    height: 50px;
    cursor: pointer;
    background-size: 100%;
    opacity: .8;
    line-height: 25px;
    background-position: center center
}

.top_nav a.active:before,
.top_nav a:hover:before,
.user .active .image,
.user-fav:hover .image,
.user-later:hover .image,
.user-played:hover .image {
    opacity: 1
}

.user-played .image {
    background-image: url(../../images/played-icon.png)
}

.user-fav .image {
    background-image: url(../../images/fav-icon.png)
}

.user-later .image {
    background-image: url(../../images/game-later-counts.png)
}

.user-fav.disabled .image,
.user-later.disabled .image,
.user-played.disabled .image {
    background: 0 0
}

.user .counts {
    position: absolute;
    color: #FFF;
    right: 21px;
    top: 4px;
    background: #30530f;
    padding: 6px;
    border-radius: 50%;
    font-size: 1em;
    width: 18px;
    height: 18px;
    text-align: center;
    opacity: .9;
    box-shadow: inset 0 0 1px 2px #9A9B9E;
    cursor: pointer;
    line-height: 18px;
    font-weight: 700
}

.user .action:hover .counts,
.user .active .counts {
    background: #fff;
    color: #000
}

#played {
    background-color: #76705C;
    padding: 10px 0 20px;
    display: none;
    float: left;
    width: 100%
}

.played-wrapper {
    width: 100%;
    position: relative;
    float: left
}

.played {
    height: 150px;
    overflow: hidden
}

.hc .country {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.top_nav a {
    padding: 0 15px;
    position: relative;
    color: #ECE4E4;
    text-shadow: 0 -1px 1px #000;
    font-size: 1.1em;
}

.top_nav a:before {
    opacity: 0;
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 2px;
    bottom: 50%;
    margin-bottom: -14.5px;
    background-color: #fff;
    -webkit-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out
}

.game .hw {
    position: absolute
}


.game .game-data-container {
    position: relative;
    overflow: hidden;
    height: 100%
}

.game .tags {
    height: 40px
}

.game .tags li {
    display: inline-block;
    padding: .3em 0
}

.game .tags li li a {
    text-transform: none;
    line-height: 1.5em;
    color: #424242
}

.menu-left.game .center {
    margin: 0
}

body.fullscreen {
    overflow: hidden;
}
.fullscreen #my_game
{
    position: fixed;
    background: #000;
    background: rgba(0,0,0,0.8);
    z-index: 999999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#my_game
{
    height: 100%;
    width: 100%;
    position: relative;
}
.fullscreen .bfs{display: block;}
.bfs{
    display: none;
    position: fixed;
    cursor: pointer;
    top: 10px;
    right: 10px;
    z-index: 9999999;
    width: 1.7em;
    height: 1.7em;
} 

.menu-left .games_cnt_left {
    float: left;
    width: 240px;
    margin: 0;
    min-height: 600px;
    display: block
}


.AdsLongBoxBottom {
    text-align: center;
    margin-top: 15px;
}

.game .AdsLongBoxBottom {
    padding: 10px 0;
    text-align: center;
    left: 0;
    right: 0
}

.game #game_preloader {
    margin: 0 auto;
    text-align: center
}

.game .game-integration {
    background-color: #fff;
    position: relative;
    clear: both;
    min-width: 720px;
    min-height: 400px;
    text-align: center
}

.game .AdsLongBox {
    margin: 5px 0 35px
}

.game .games_similar_side {
    margin: 0 0 0 .5em;
    width: 125px;
    position: absolute;
    top: 0;
    right: -250px;
    bottom: 0;
    display: block;
    overflow: hidden;
    background-color: #424242;
    padding-left: 5px;
    -webkit-transition: .35s ease-out;
    -ms-transition: .35s ease-out;
    transition: .35s ease-out
}

.menu-left.game .games_similar_side .span2,
.menu-left.game .panels .span2 {
    margin: 4px 0 5px;
    height: auto;
    width: 100%;
    min-width: 100px
}

.game .span2:hover,
.menu-left .games_similar_side .span2:hover,
.menu-left.game .panels .span2 {
    -ms-transform: none;
    -webkit-transform: none;
    transform: none
}

.game #featured-games {
    margin: 0;
    padding-bottom: 20px;
    float: left
}

.game .game-header-title {
    float: left;
    color: #f8f7fb;
    font-size: 1.2em;
    padding: .125em 0
}

.similar-games {
    margin: 0 360px 0 0
}

.veedpage
{
    /*position: relative;
    margin-top: 5px;
    min-height: 500px;
    width: 100%;*/
    
    position: absolute;
    /* min-height: 500px; */
    width: 100%;
    bottom: 0;
    top: 60px
}
#Veediframe{width: 100%;height: 100%;}


.menu .mob-nav {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE0QjBFOTg2QkQ2MTExRTY5RDI1OUY2MkIwRkU1QkY3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE0QjBFOTg3QkQ2MTExRTY5RDI1OUY2MkIwRkU1QkY3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTRCMEU5ODRCRDYxMTFFNjlEMjU5RjYyQjBGRTVCRjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTRCMEU5ODVCRDYxMTFFNjlEMjU5RjYyQjBGRTVCRjciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6xBpn7AAADUklEQVR42rSXTUgUYRjHd2cnS8pcxaBz7lIi0l6CigqRvujr0CmVNC3xoIfCQx6rQxSEh7oEFWagxyCMRCsj+j7VakhgrV4iimiVUjRy7f/E/4VxeGfnnXV74Me6zuw8z/t8T/j37GzIUIrAIVADNoMNYC2vTYMJ8A4Mg/vgl8lDwwYGxEEnqAWF4A8YAx+pWKSY91UAG8hD+8Bl3peTAaLsAjgNLNAPesAj8DOLl/aCRnpLjO0C58BcEANi4C6oAg9AB/gQCiaVVC4GJcFRkDIxIAEGwRrQBm6Hlict4CrDJcaMZDNATv4CrAAHwatQfmQHE1PCsN3pCacBEvM3oBzszqNyJTvBEEO5FcyHmFxKzjPmbf9BucgzJnSCSbnEA3GW1hBd75Z14DtYNFQmBysD3zTXpIp2sWQ/KQ908kcdHsq/gFsuj3lJhIn7GZRqrp9hrzirLC1ik+n3KDU5+R3QBG76GKGUH+dnWnPPKKusDqy22TAK2WR0Im4/xb+b+CnfMxrl8ox6GtqaJWRy334Jt83eLh3rYZaTZXyMiNBLdQ7lmSzPG+T1GpuDZcxgeHgZYfFEpspDDM246LY51Z4aZrfbiDAoCKhciQypLTZH6nSAelZGiPIT/F9Q5coLUSvHpmLx5EoKaFBgsXn64oC/ccZ8JWjgtWawYPicEjBlc5OJG/4ookm4MMutgZ8nDY2QwZeyuEZVsCEFVZ6hsmaWYSOvRXyeVcpDJy3ucDZntZ/yeo+EU0b0MDH9jNjHPHosw0gWj6/yBRzxSDjVXv2yPcJ7xIhuhmPRoxHJXrDeYgPqY0uu1Nxcxllxw6DUFlii3fRWieaeBL3dC2bUOI6xGw6zR+tilg4wjiUxox7D6AlPv0kKwHJ0pS7GpkXzox8BlKsBplPeDqrBFVbfkpVsFXgNNoI94HmeN6Jqxv49PTCvW0plLrykMYe5RuVL+T2JOZVPOjPcKSkmyBzXs9Y8KG/nyWcY4kl3ibllhFbKdnSdO1xVDooTTLhrDreP6mpcJ+KJbeASF0h5sxkAxzxKy1kttTzxWyq96HZ70JfTci6Q/3Y49oFxVk7aMVhibK+qt/Ty5XRiuW/HSqRjHnC9nkd5bYpeSzJkA4y5r/wVYACsqv843ksYwAAAAABJRU5ErkJggg==) center center no-repeat #787396
}

.menu .mob-nav:hover {
    background-color: #372763
}

.mob-nav-src {
    background: #635482;
    padding: 8px;
    cursor: pointer;
    width: 26px
}

.mob-nav {
    padding: 0 10px;
    cursor: pointer;
    border-right: 1px solid #261D39;
    box-shadow: 1px 0 rgba(255, 255, 255, .1);
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRFAAAA%2F%2F%2F%2FAAAAAAAAAAAAAAAAAAAA%2F%2F%2F%2FeQ7W7QAAAAd0Uk5TAAAIGCBIYL3mPFwAAAA%2FSURBVChTYxBEAwx0ElAvRwKKQAFzZAFDoIBpGgKkggSUXRDAGaSFARkwYhVghFoogEuATu7AEKCFO9AANQQAPu5OcaM2uDkAAAAASUVORK5CYII%3D) center center no-repeat;
    width: 30px;
    height: 100%
}

.hc .header-actions {
    height: 100%;
    float: left;
    margin-right: 20px
}

.mob-nav svg,
.mob-nav-src svg {
    width: 24px;
    height: 28px
}

.s-white .color {
    fill: #FAF6F6
}

@media only screen and (min-width:120px) and (max-width:420px) {
    :root {
    --gccolh: 90px;
    --gccolw: 140px;
    --gcgap: 20px;
    }
}

@media only screen and (min-width:532px) and (max-width:634px) {

}

@media only screen and (min-width:635px) and (max-width:784px) {

}

@media only screen and (min-width:785px) {

}

@media only screen and (min-width:1024px) {

}

@media only screen and (min-width:1280px) {
}

.walkthrough1 {
    font-size: 1.4em;
    background-color: #3F256B;
    padding: 2px 15px;
    line-height: 28px;
    position: absolute;
    right: 0;
    border-radius: 0 4px 0 0;
    top: 0;
    color: #fff;
    cursor: pointer
}

.veedtitle {
    position: relative;
    padding: 0 1%;
    margin-bottom: 10px;
    background-color: #08D;
    font-size: 20px;
    line-height: 35px;
    height: 35px;
    color: #fff
}

#veediFixed {
    position: fixed;
    border-radius: 5px;
    min-width: 90px;
    box-shadow: 0 0 10px 0 #000;
    border: 1px solid #C3C4D6;
    cursor: pointer;
    background-color: #1A2727;
    left: 10px;
    z-index: 555555555555;
    top: 125px
}

#veediFixed:hover {
    background-color: #675959
}

#veediFixed #veedi-close {
    position: absolute;
    top: -12px;
    left: 40%;
    width: 20px;
    height: 20px;
    border-radius: 100px;
    border: 1px solid #C3C4D6;
    border-left-width: 0!important;
    border-bottom: none!important;
    cursor: pointer;
    background-color: #000
}

#veediFixed #veedi-Video svg {
    margin-top: 15px
}

#veediFixed svg {
    fill: #55a5a5
}

#veediFixed:hover svg {
    fill: #F0EFF1
}

#veediFixed #veedi-info .veedi-text {
    margin: 0;
    padding: 8px;
    font-size: 1.2em;
    font-family: Arial!important;
    color: #55a5a5
}

#veediFixed:hover #veedi-info .veedi-text {
    color: #F0EFF1
}

#exit-content h2,
.exit-head,
.videos a {
    color: #fff
}

.over {
    left: 0;
    right: 0;
    bottom: 0;
    text-indent: -99999px;
    background-color: #C3ADAD;
    filter: alpha(opacity=0);
    opacity: .4;
    z-index: 10
}

.show {
    display: block
}

.videos {
    float: left;
    line-height: 50px;
    font-size: 1.5em;
    padding: 0 40px 0 12px;
    background: url(../images/video-guide.png) no-repeat #383633;
    background-position: 90%, right;
    margin-left: 25px
}

.videos:hover {
    background-color: #735B59
}

.Google_box_right_160 {
    float: left;
    width: 160px
}

.sorting {
    font-size: 1em;
    float: left;
    border-radius: 6px;
    background: #fff;
    position: relative;
    margin-left: 35px;
    border: 1px solid #b9c4ce;
    cursor: pointer
}

.button{
    font-size: 1.5em;
}

.sorting span {
    padding: 0 10px;
    line-height: 30px;
    color: #230244;
    height: 30px;
    border-left: 1px solid #b9c4ce;
    float: left
}

.button,
.sorting span:first-child {
    border: 0
}

.sorting span:hover {
    background-color: #635482;
    color: #fff
}

.sorting span.active {
    background: #589ad8;
    color: #fff
}

#toate-jocurile.loading {
    -ms-filter: "alpha(opacity=20)";
    filter: alpha(opacity=20);
    -moz-opacity: .2;
    -khtml-opacity: .2;
    opacity: .2
}
.pagelink .game-title
{
    opacity: 1;
    visibility: visible;
    top: 0;
    border-radius: 10px;
    font-size: 1.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3d2f331a;
}
.game-title {
    position: absolute;
    background-color: rgba(0, 61, 104, .8);
    width: 100%;
    bottom: 0;
    right: 0;
    z-index: 333;
    -moz-transition: .2s all ease-in-out;
    -ms-transition: .2s all ease-in-out;
    -o-transition: .2s all ease-in-out;
    -webkit-transition: .2s all ease-in-out;
    transition: .2s all ease-in-out;
    /*-moz-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)*/
    opacity:0;
}



.game-title span,
.game-title {
    font-size: 0.8em;
    color: #fff;
    text-align: center;
    padding: 6px 4px;
    line-height: 14px;
    font-weight: 700;
    visibility: hidden;
}

.button,
.mmo-game .btn {
    color: #fff;
    text-align: center
}

#A4Gwrap,
.button {
    display: inline-block
}

.button {
    text-overflow: ellipsis;
    vertical-align: middle;
    line-height: 25px;
    margin-left: .3em;
    padding: .25em .8125em .1875em;
    border-bottom: .15em solid #d65e00;
    border-right: .1em solid #d65e00;
    border-radius: .2rem;
    background-color: #ee6900;
    text-transform: uppercase;
    -webkit-transition: background 450ms cubic-bezier(.23, 1, .32, 1), opacity .4s ease;
    transition: background 450ms cubic-bezier(.23, 1, .32, 1), opacity .4s ease;
    white-space: nowrap;
    cursor: pointer
}

.button.blue {
    background-color: #349edb;
    border-color: #2e8ec5
}

.button.orange {
    background-color: #d65e00;
    border-color: #ca5900
}



.game .container.blue {
    background-color: #ebe7f5
}

.game .container.green {
    background-color: #d1e2cf;
    border-top: 2px solid #9fb392
}

.game .span2 {
    border: 1px solid #4f3f3f;
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .28)
}

.game .span2 img {
    height: 100%
}

.game .game-title {
    left: 3px;
    right: 3px;
    bottom: 0;
    width: inherit;
    border-top: 1px solid #b2b2bb
}

.game .owl-item .span2 {
    width: 100%
}

.game .thumbnail {
    border: none;
    padding: 3px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);
    background-image: -moz-linear-gradient(bottom, #ceced4 0, #403f7e 54%, #e6e4ef 100%);
    background-image: -webkit-linear-gradient(bottom, #ceced4 0, #403f7e 54%, #e6e4ef 100%);
    transition: background-image 1s ease-in-out
}

.game .thumbnail.green {
    background-image: -moz-linear-gradient(bottom, #FFE2BA 0, #C98014 50%, #FFE5BF 100%);
    background-image: -webkit-linear-gradient(bottom, #FFE2BA 0, #C98014 50%, #FFE5BF 100%)
}


@-webkit-keyframes fadeOut {
    0% {
    opacity: 1
}
100% {
    opacity: 0
}
}

@keyframes fadeOut {
    0% {
    opacity: 1
}
100% {
    opacity: 0
}
}


.mmo-game-container {
    max-width: 60rem;
    width: 100%;
    margin: 0px auto;
    position: relative
}

.mmo-game {
    position: relative;
    display: block;
    margin: 10px 1.5% 30px;
    box-shadow: 0 3px 10px -1px rgba(0, 0, 0, .5);
    border: 1px solid #b3a1a1;
    border-bottom: 4px solid #131029;
    border-radius: 4px;
    transition: border .2s ease-out
}

.mmo-game img {
    width: 100%
}

.mmo-game .caption {
    position: absolute;
    width: 100%;
    border-top: 1px solid #b1a3a3;
    background-color: rgba(69, 69, 119, .8);
    transition: top .2s ease-out, border .2s ease-out, background-color .2s;
    bottom: 0;
    z-index: 20
}

.mmo-game .caption:hover {
    background-color: rgba(69, 69, 119, .92)
}

.mmo-game .btn {
    padding: 8px 20px;
    margin-top: 2px;
    margin-right: 2px;
    background-color: #589ad8;
    font-size: 1.75em;
    text-shadow: none;
    transition: background .2s, color .1s, font-size .2s
}

.mmo-game .caption:hover .btn {
    color: #535673;
    background-color: #fff
}

.mmo-game .caption h2,
.mmo-game .caption p {
    padding: 10px 15px;
    color: #efe8e8;
    font-size: 1rem
}

.mmo-game .caption h2.title {
    border: 0;
    font-size: 2em;
    margin: 0;
    max-width: 100%;
    position: relative;
    transition: color .1s ease-out;
    vertical-align: top;
    color: #fdfcfc
}

.mmo-game .caption h2,
.mmo-game .caption h3,
.mmo-game .caption p {
    text-shadow: 0 0 20px #2f0909, 0 0 10px rgba(255, 255, 255, .6)
}

.mmo-game .caption .line {
    border-color: rgba(133, 133, 144, .79);
    margin: 0
}

.line {
    border: solid #DDD;
    border-width: 1px 0 0;
    clear: both;
    height: 0;
    margin: 1.25rem 0 1.1875rem
}

#mmo-promo.mmo-game-container {
    max-width: 85rem
}

#mmo-promo .mmo-game {
    height: 280px
}

#mmo-promo .mmo-game .caption p {
    display: none
}

#mmo-promo .mmo-game .caption:hover p {
    display: block;
    transition: all .2s ease-out
}

.mmo-promo-left {
    float: left;
    width: 380px;
    margin-top: 10px
}

.mmo-promo-right {
    float: right;
    width: 340px;
    margin: 5px 30px;
    text-align: center
}

.contentdetail_box .item a:before,
.mmo-game a:before {
    content: "";
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .2);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.contentdetail_box .item a:hover:before,
.mmo-game a:hover:before {
    -webkit-transform: scale(1);
    transform: scale(1)
}

[class*=icon--] {
    background-image: url(../images/sprite-all.png);
    background-repeat: no-repeat;
    background-size: initial;
    display: block
}

.icon--favorites {
    width: 24px;
    height: 24px;
    background-position: 1px 0
}

.icon--fullscreen {
    width: 16px;
    height: 16px;
    background-position: -31px 3px
}

.icon--info,
.icon--recent-played,
.icon--recommended,
.icon--share {
    width: 32px;
    height: 32px
}

.icon--info {
    background-position: -65px -5px
}

.icon--recent-played {
    background-position: -5px -47px
}

.icon--recommended {
    background-position: -47px -47px
}

.icon--share {
    background-position: -107px -5px
}

.icon--zoom-in {
    width: 16px;
    height: 16px;
    background-position: -80px -39px
}

.icon--zoom-out {
    width: 16px;
    height: 16px;
    background-position: -107px -39px
}

.country .flag {
    margin: 0px 15px 0px 10px;
    position: relative;
}

.categ_list .bigdiv .flag {  
    margin: 0px 5px 0;
}

.categ_list .tlli {
    cursor: pointer;
    background: #827E9F
}

.categ_list .item_sites .wc {
    width: 410px
}

.categ_list:hover {
    background-color: #513434
}

.categ_list .wc {
    width: 580px;
    display: inline-block;
    background-color: #E0E2E9;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.categ_list .wc {
    font-size: 0.9em;
}

.categ_list .wc a {
    padding: 2px 4px;
    font-weight: 400;
    color: #004993;
    flex-basis: 150px;
    flex-grow: 1;
}

.categ_list .wc a:hover {
    background-color: #5f6f97;
    color: white;
}

.bigdiv {

    position: absolute;
    z-index: 60000;
    background-color: #513434;
    padding: 7px;
    border-radius: 4px;
    right: 0;
    top: 40px;
    -ms-transition: .4s all ease-in-out;
    -o-transition: .4s all ease-in-out;
    -webkit-transition: .4s all ease-in-out;
    transition: .4s all;
    -webkit-transform: scale(.95, .95);
    transform: scale(.9, .9);
    opacity:0;
    visibility: hidden;
}

.categ_list:hover .bigdiv {

    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    visibility: visible;
    opacity:1;
}

.wc a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.flag {
    text-indent: -9999px;
    text-align: left;
    width: 32px;
    height: 32px;
    background: url(../../images/flags_new-min.png) no-repeat;
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
}

.flag-ae {
    background-position: -0px -0px;
}

.flag-ag {
    background-position: -32px -0px;
}

.flag-at {
    background-position: -64px -0px;
}

.flag-au {
    background-position: -96px -0px;
}

.flag-be {
    background-position: -128px -0px;
}

.flag-bg {
    background-position: -160px -0px;
}

.flag-bl {
    background-position: -192px -0px;
}

.flag-br {
    background-position: -0px -32px;
}

.flag-ca {
    background-position: -32px -32px;
}

.flag-ch {
    background-position: -64px -32px;
}

.flag-cl {
    background-position: -96px -32px;
}

.flag-cn {
    background-position: -128px -32px;
}

.flag-co {
    background-position: -160px -32px;
}

.flag-cr {
    background-position: -192px -32px;
}

.flag-cy {
    background-position: -0px -64px;
}

.flag-cz {
    background-position: -32px -64px;
}

.flag-de {
    background-position: -64px -64px;
}

.flag-dk {
    background-position: -96px -64px;
}

.flag-ee {
    background-position: -128px -64px;
}

.flag-es {
    background-position: -160px -64px;
}

.flag-fi {
    background-position: -192px -64px;
}

.flag-fr {
    background-position: -0px -96px;
}

.flag-ge {
    background-position: -32px -96px;
}

.flag-gr {
    background-position: -64px -96px;
}

.flag-hu {
    background-position: -96px -96px;
}

.flag-il {
    background-position: -128px -96px;
}

.flag-in {
    background-position: -160px -96px;
}

.flag-ir {
    background-position: -192px -96px;
}

.flag-it {
    background-position: -0px -128px;
}

.flag-jp {
    background-position: -32px -128px;
}

.flag-kw {
    background-position: -64px -128px;
}

.flag-lt {
    background-position: -96px -128px;
}

.flag-lu {
    background-position: -128px -128px;
}

.flag-lv {
    background-position: -160px -128px;
}

.flag-md {
    background-position: -192px -128px;
}

.flag-mt {
    background-position: -0px -160px;
}

.flag-mx {
    background-position: -32px -160px;
}

.flag-my {
    background-position: -64px -160px;
}

.flag-nl {
    background-position: -96px -160px;
}

.flag-no {
    background-position: -128px -160px;
}

.flag-ph {
    background-position: -160px -160px;
}

.flag-pl {
    background-position: -192px -160px;
}

.flag-pt {
    background-position: -0px -192px;
}

.flag-qa {
    background-position: -32px -192px;
}

.flag-ro {
    background-position: -64px -192px;
}

.flag-ru {
    background-position: -96px -192px;
}

.flag-sa {
    background-position: -128px -192px;
}

.flag-se {
    background-position: -160px -192px;
}

.flag-sg {
    background-position: -192px -192px;
}

.flag-si {
    background-position: -0px -224px;
}

.flag-sk {
    background-position: -32px -224px;
}

.flag-th {
    background-position: -64px -224px;
}

.flag-tr {
    background-position: -96px -224px;
}

.flag-ua {
    background-position: -128px -224px;
}

.flag-uk {
    background-position: -160px -224px;
}

.flag-us {
    background-position: -192px -224px;
}

.flag-ve {
    background-position: -0px -256px;
}

.flag-za {
    background-position: -32px -256px;
}

.dark .center {
    padding-top: 40px;
    background-color: rgba(248, 248, 248, 0.5);
}


.dark .hw,
.dark #footer {
    background-color: #6c5c60;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .24);
    border-bottom: 1px solid #0d0d0d;
}


.dark .btn {
    background-color: #2e1e63;
    font-size: 1.25em;
}

.dark .btn.active,
.btn:hover,
.dark .header-actions .main-menu:hover {
    background-color: #5d43b2;
}

.dark .thumbnail,
._th {
    display: block;
    line-height: 23px;
    padding: 0px;
    border: 0px solid #c0bbbb;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /*-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
    box-shadow: 1px 1px 2px rgba(0,0,0,.4);*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .34);
}

.game-title, .cat-title {
    background-color: #3d2f33a8;
    border-radius: 0px 0px 10px 10px;
}

.dark .bagde-new {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #2b2b45fa;
    color: #fcf9f9;
    padding: 0px 12px;
    font-size: 0.8em;
    border-radius: 8px 0;
}




/*personalizzare tema curenta - DARKVISION*/


/*game page*/

.games_container {
    padding-top: 62px;
}



.dark #subcat-sort li {
    padding: 6px 10px;
    border-radius: 10px;
    /*background-color: #9d9797; */
    margin: 3px 5px 3px 0px;
    transition: border-color .2s ease,color .2s ease;
}


.dark #subcat-sort li a {
    color: #02000d70;
    font-weight: 600;
    font-size: 0.9em;
    transition: color .2s ease,color .2s ease;
}

.dark .game_description {
    margin: 10px 0px;
}

.dark .game_info {
    background-color: #e3dcdc;
}


.ga{
    background-color: #eeefff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
    height: 60px;
    padding: 0px 20px;
}
.ga h1{flex-grow:1}


.cat-title {
    position: absolute;
    background-color: #f2eded;
    width: 100%;
    bottom: 0;
    left:0;
    z-index: 333;
    color: #261515;
    text-align: center;
    font-weight: 700;
    line-height: 45px;
    font-size: 1em;
}

.span4:hover {
    transform: scale(1.03) translate3d(0, -6px, 0);
}

.AdsUG
{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.walk{
    margin-left: auto;
    margin-right: 20px;
}

button.walkthrough {
    background-color: #9493a9;
    box-shadow: 0px 3px 0 #757678;
    padding-left: 45px;
    height: 32px;
    display: flex;
    align-items: center;
}

button.walkthrough:hover {
    background: #6a4d50;
    box-shadow: 0px 3px 0 #4b3537;
}

button {
    margin: auto;
    padding: 8px;
    border-radius: 30px;
    border: 0;
    background-color: #59B21F;
    height: 48px;
    box-shadow: 0px 5px 0 #3E8E0D;
    position: relative;
    overflow: hidden;
    outline: none;
    cursor: pointer;
}

button.walkthrough .icon {
    width: 22px;
    height: 22px;
    left: 20px;
    top: 6px;
    z-index: 9;
    position: absolute;
}

button.walkthrough .icon svg {
    width: 100%;
    height: 100%;
    fill:#fff;
}

button.walkthrough .text {
    text-transform: capitalize;
}


button .text {
    color: white;
    text-transform: uppercase;
    font-size: 15px;
    text-align: center;
    padding: 0px 10px;
}


.gradient_silver:after {
    content: "";
    background: url('') no-repeat 100%/auto 100%;
    height: 100%;
    width: 34px;
}

/***VOTING SECTION*/
.votes {
    margin-right: 20px;
    margin-left: auto;
}

.votes .vot{
    position: relative;
    padding: 8px 10px 0;
    cursor: pointer;
    font-size: 12px;
    color: var(--grey-3);
    flex-direction: column;
    justify-content: center;
}

.votes, .votes .vot{
    display: flex;
    align-items: center;
}

.votes .vot , .votes .vot .svg{
    transition: all .1s ease-out;
}

.votes .vot .svg {
    margin-bottom: 3px;
    stroke: var(--grey-3);
    fill: transparent;
    width: 24px;
    height: 24px;
}

.votes .vot.down .svg {
    transform: scale3d(-1,-1,1);
}

.votes .vot.up:after {
    content: "";
    width: 1px;
    height: 22px;
    background: var(--grey-5);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate3d(0,-50%,0);
}

.votes .vot:hover{
    color: var(--hover-blue);
}

.votes .vot:hover .svg{
    stroke: var(--hover-blue);
}

.cls-1{fill:#4b48ae;}
.cls-2{fill:#141f38;}
.cls-3{fill:#fff;}                  
.votes .vot:hover .cls-1{fill:var(--hepy-blue);}
    
            

.fs, .ww, .sl {
    padding: 10px;
    border: 1px solid #a19494;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.24);
    border-radius: 50%;
    background: #0000000f;
    cursor: pointer;
    transition: border-color .2s ease-out,box-shadow .2s ease-out,transform .2s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
}

.fs:hover , .ww:hover, .sl:hover{
    box-shadow: 0 6px 12px 0 rgba(0,0,0,.34);
    transform: translateY(-3px);
}


.ww{
    background-color: var(--grey-9);
    fill: var(--hepy-blue-1);
}

.sl{
    background-color: var(--grey-1);
    fill: var(--hepy-blue-5);
}

.ww svg, .fs svg , .sl svg
{
    width: 18px;
    height: 18px;
}

.dc {
    position: fixed!important;
    z-index: 1000!important;
    top: 0!important;
    left: 0!important;
    width: 100vw!important;
    height: 100vh!important;
    background: #fff!important;
}

.game_data div, .game_data embed, .game_data iframe, .game_data object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.red-bubbles .left {
    width: 1px;
    height: 1px;
    display: block;
    position: absolute;
}

.red-bubbles .left:before {
    width: 30px;
    height: 30px;
    left: -10px;
    top: -10px;
}

.red-bubbles .left:after {
    width: 20px;
    height: 20px;
    left: 60px;
    top: 37px;
}

.red-bubbles .bubble:before, .red-bubbles .bubble:after {
    position: absolute;
    background: #FF4859;
    content: " ";
    border-radius: 50%;
}
.red-bubbles .right:after {
    width: 36px;
    height: 50px;
    right: 0px;
    top: -33px;
}
.red-bubbles .bubble:before, .red-bubbles .bubble:after {
    position: absolute;
    background: #FF4859;
    content: " ";
    border-radius: 50%;
}
.gwd {
    width: 100%;
    height: 100%;
}

.mobile .gwd, .mobile .pc{
    position: fixed!important;
    z-index: 100000!important;
    top: 0!important;
    left: 0!important;
    width: 100vw!important;
    height: 100vh!important;
    background: #000!important;
    display: none;
    min-height: -webkit-fill-available;
    height: -webkit-fill-available!important;
}

.mob-nav-back {
    position: absolute;
    height: 46px;
    left: 0;
    top: 10px;
    z-index: 9999;
    padding: 0px 8px 0px 8px;
    cursor: pointer;
    background-color: #fff;
    border-radius: 0px 15px 15px 0px;
}

.s-white .color {
    fill: #213c7c;
}
.mob-nav-back svg {
    width: 40px;
    height: 40px;
    padding-top: 3px;
}

.bs{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    z-index: 9000;
}


.sc{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
}
.mobile .sc{display: block;}

.spb {
    /*padding: 8px 15px 8px 0;*/
    color: #000;
    background: rgb(0 0 0 / 52%);
    position: relative;
    height: 100%;

    /* background: #D2D4DA; */
    /* border-bottom: 1px solid #AFAAAA; */
}

.spb .g-title {
    width: 100%;
    background-color: #afafd2;
    padding: 10px 0;
    background: linear-gradient(to right,rgba(30,87,153,0) 0,rgb(0 0 0 / 61%) 50%,rgba(125,185,232,0) 100%);
    border: 1px solid #7e7777;
}

.spb .g-logo {
    width: 100%;
    position: relative;
    text-align: center;
}

.spb img {
    border-radius: 10px;
    border: 1px solid #551010;
    background-color: #cbcbd9;
    padding: 3px;
}

.spb button{
    display: inline-block;
    background: #185b7a;
    padding: 8px 25px;
    border-radius: 25px;
    border: 1px solid #e7dddd;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    position: absolute;
    bottom: -10px;
    transform: translateX(-50%);
    left: 50%;
    box-shadow: 0px 1px 0 #87889b;
    /*animation: pulse 1.5s ease 0s infinite;*/
}

.spb button:hover{
    background-color: #12445b;
    border-width: 2px;
}
.spb h1
{
    color:white;
    font-size: 1.8em;
    line-height: 50px;
}

.pld
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10006;
    display: flex;
    align-items: center;
    background-color: #0200098c;
}

.ld{
    margin: 0px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: gdsdk__load 8 1.1s infinite linear;
    animation: ld8 1.1s infinite linear;
    display: block;
}

.ld, .ld:after {
    border-radius: 50%;
    width: 8em;
    height: 8em;
}



.bdg{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    background-color: #eee6e6;
    width: 35px;
    height: 35px;
    pointer-events: none;
    transition: .3s ease-in-out;
    border-radius: 10px 0px 10px 0px;
}

.bdg svg{
    fill: #893823;
    width: 22px;
    height: 22px;
}

.bdg .fv{
    fill: #893823;
}

.bdg.py svg{
    fill: #4c4b72;
}
.bdg .nw{
    fill: #893823;
}

.span2:hover .bdg {
    opacity: 0;
}

.ribbon{
    position: absolute;
    border-radius: 0 8px 8px 0;
    background-color: var(--hepy-blue);
    top: 5px;
    z-index: 9001;
    display: flex;
}

.ribbon:before, .ribbon:after{
    position:absolute;
    content: '';
    display: block;
}

.ribbon:before{
    width: 6px;
    left: -6px;
    top: 0;
    bottom: -8px;
    background: inherit;
    border-radius: 4px 0 0 4px;
}

.ribbon:after{
    width: 6px;
    height: 8px;
    background: rgb(2 0 0 / 35%);
    bottom: -8px;
    left: -6px;
    border-radius: 4px 0 0 4px;
    z-index: 9999999;
    background: var(--grey-5);
}

.ribbon .im {
    fill: #fff;
    position: relative;
    z-index: 2;
    height: 25px;
    width: 25px;
}

.ribbon-v {
    position: absolute;
    border-radius: 0px 0px 10px 10px;
    background-color: var(--hepy-blue);
    top: 0px;
    z-index: 9001;
    display: flex;
    right: 10px;
    padding: 0px 6px 5px 6px;
    color: white;
}

.ribbon-v:before {
    /* width: 30px; */
    left: -6px;
    top: -6px;
    bottom: 0px;
    background: inherit;
    border-radius: 3px 5px 0 0px;
    right: 0px;
    height: 6px;
}
.ribbon-v:before, .ribbon-v:after {
    position: absolute;
    content: '';
    display: none;
}

.ribbon-v:after {
    top: -6px;
    width: 6px;
    height: 6px;
    background: rgb(2 0 0 / 35%);
    /* bottom: 11px; */
    left: -6px;
    border-radius: 3px 3px 0 0px;
    z-index: 9999999;
    background-color: var(--grey-5);
}

.ribbon-v .im {
    fill: #fff;
    position: relative;
    padding: 2px;
    z-index: 9003;
    height: 24px;
    width: 28px;
}

       
.preroll-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 100%;
    height: auto;
}

.preroll-message {
    position: absolute;
    top: 0;
    left: 0;
    
    text-align: center;
}

#playButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    cursor: pointer;
    z-index: 100;
    filter: hue-rotate(190deg);
    height:20vh; 
    width:20vh;
}
#playButton:hover {
    filter: hue-rotate(0deg);
}

#playButton svg {fill:#d9d6d6; animation: btnplay 4s ease-in-out infinite both;}
#playButton:hover svg {fill:#c2d3b6}

:root {
    --gcolw: 105px;
    --gcolh: 105px;
                       
    --ggap: 16px;
    --gcolgap: 20px;
    --growgap: 19px;

    --gccolh: 120px;
    --gccolw: 180px;
    --gcgap: 16px;
    
    --gameGap: 10px;
    
    --gamePadRight: 366px;
    --gameSpanC : 7;
    --gameSpanR : 5;
    
    --adsSpanC : 3;
    --adsSpanR : 5;
    
    --gameWDef: 831px;
    --gameHDef: 589px;
    
    --gameW: calc(var(--gcolw)*var(--gameSpanC) + var(--gcolgap)*var(--gameSpanC) - var(--gcolgap) - var(--gameGap)) ;
    --gameH: calc(var(--gcolh)*var(--gameSpanR) + var(--growgap)*var(--gameSpanR) - var(--growgap)) ;

    --hepy-blue: #009cff;
    --hepy-blue-1: #292672;
    --hepy-hover: #0097f5;

    --text-blue: #002b50;
    --hover-blue: #002b50;
    --grey-3: #7e91ab;
    --grey-5: #bac9de;
    --grey-7: #f0f5fc;
    --grey-9: #f9fbff;
    --rose-1: #ff7690;
    --rose-2: #ff8aa6;
    --rose-3: #ff99b1;
    --rose-4: #ffa4ba;
    --rose-5: #ffa9be;
    --rose-6: #ffaec5;
    --rose-7: #ffc2d6;
    --rose-8: #ffc9dd;
    --yellow-1: #ff9e00;
    --yellow-2: #ffaf00;
    --yellow-3: #ffc500;
    --yellow-4: #ffd100;
    --yellow-5: #ffdc00;
    --yellow-6: #ffe200;
    --yellow-7: #faeb59;
    --yellow-8: #ffed85;
}



/*CPM QuantCast*/
body.mobile #qc-cmp2-ui {
    margin: 0 30px;
    height: auto;
}
body.mobile #qc-cmp2-main .qc-cmp2-summary-section {
    padding: 10px 0px;
    overflow: scroll;
}
body #qc-cmp2-main button[mode=primary] {
    border-radius: 20px;
    padding: 4px 0 3px;
}

body #qc-cmp2-main button[mode=secondary] {
    border-radius: 20px;
    box-shadow: none;    
    border: 1px solid var(--hepy-blue);
}

body .qc-cmp2-persistent-link
{display: none;}

@media (min-width: 103px) and (max-width: 850px)
{
    body.mobile #qc-cmp2-main #qc-cmp2-ui {
        margin: 0px 10px;
    }
    body.mobile #qc-cmp2-main #qc-cmp2-ui p {
    font-size: 14px;
    }
    
    body.mobile #qc-cmp2-main #qc-cmp2-main div[role=dialog], 
    body.mobile #qc-cmp2-main #qc-cmp2-ui {
        border-radius: 16px;
    }
    
    body.mobile #qc-cmp2-main #qc-cmp2-ui .qc-cmp2-summary-section {
        max-height: 40vh;
        }
}



@media only screen and (min-width:100px) and (max-width:321px){
    .menu_links {display: none}
    .ga, .adsRight, .adsW {display: none;}
    
    :root
    {
       --gameSpanC : 2;
       --gameSpanR : 2;
    }
}

@media only screen and (min-width:322px) and (max-width:499px){
    .menu_links {display: none}
    .ga, .adsRight, .adsW {display: none;}
    
    :root
    {
       --gameSpanC : 3;
       --gameSpanR : 2;
    }
}

@media only screen and (min-width:500px) and (max-width:730px){
    .menu_links {display: none}
    .ga, .adsRight, .adsW {display: none;}
    
    :root
    {
       --gameSpanC : 4;
       --gameSpanR : 3;
    }
}

@media only screen and (min-width:731px) and (max-width:799px){
    .menu_links {display: none}
    .adsRight, .adsW {display: none;}
    
    :root
    {
       --gameSpanC : 5;
       --gameSpanR : 4;
    }
}

@media only screen and (min-width:250px) and (max-width:300px){

    :root {
    --gccolh: 80px;
    --gccolw: 120px;
    --gcgap: 20px;
    }
}

@media only screen and (min-width:301px) and (max-width:350px){

    :root {

    --gccolh: 100px;
    --gccolw: 140px;
    --gcgap: 20px;
    }
}

@media only screen and (min-width:101px) and (max-width:799px){

    .ad160 {display: none;}
    .gr-s61{display: none;}
}

@media only screen and (min-width:800px) and (max-width:1024px){
    .menu_links {display: none}
    .adsRight, .adsW {display: none;}
    .gr-s61{grid-column-start: span 7;}
    
    :root
    {
        --gcolw: 100px;
        --gcolh: 100px;
        --gcolgap: 15px;
        --growgap: 15px;
        --gameSpanC : 6;
        --gameSpanR : 4;
    }
    
}

@media only screen and (min-width:1024px) and (max-width:1221px){
    .menu_links {
    display: none
    }
    
    :root
    {
      --gameSpanC : 6;
      --gameSpanR : 4;
    }
}

@media only screen and (min-width:1221px) and (max-width:1250px){
    
    .menu_links {display: none}
    :root
    {
      --gameSpanC : 6;
      --gameSpanR : 4;
    }
}

@media only screen and (min-width:800px) and (max-width:1280px){

    .ad300{display: none;}
    :root
    {
        --adsSpanC : 2;
        --adsSpanR : 5;    
    }
}

@media only screen and (min-width:1280px) {
    .ad160-1{display: none;}
    
    .ad300{display: none;}
    :root
    {
        --adsSpanC : 2;
        --adsSpanR : 5;    
    }
}
/*KEYFRAMES*/

@keyframes ld8{
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}

@keyframes pulse{
    0%, 100% {
    transform: scale(1);
}
50% {
    transform: scale(1.1);
}    
}

@keyframes reveal{
    0% {
    transform: scale(0.001);
}
100% {
    transform: scale(1);
}
}

@keyframes slide{
    100% {
    transform: translateX(1.5em);
}
}

@keyframes btnplay{
0%, 70%, 100% {
    transform: translate3d(-50%,-50%,0) scale(1);
}
90% {
    transform: translate3d(-50%,-50%,0) scale(1.2);
}