/*
Theme Name: 	slitherio
Theme URI: 		slitherio
Description: 	slitherio
Version: 		1.0
Author: 		slitherio
Author URI: 	slitherio
License:
License URI:
Tags: slitherio
*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
@font-face {
    font-family: 'FontAwesome';
    src: url('font/fontawesome-webfont.eot?v=3.2.1');
    src: url('font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    *margin-right: .3em;
}
.icon-close:before {
    content: "\f00d";
    color: red;
    font-size: 20px;
}
.icon-search:before {
    content: "\f002";
}
.icon-full-screen:before {
    content: "\f0b2";
}
.icon-item:before {
    content: "\f0e7";
}
.icon-home:before {
    content: "\f015";
}
#close-full-screen {
    display: none;
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 99999;
}
h1, h2, h3 { padding:0; margin:0;}
a {color: #06538b; text-decoration:none;}
body {
  
    margin: 0 auto;
    padding: 0 inherit;
    color: #06538b;
    font-family: sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    position: relative;
    -webkit-font-smoothing: antialiased;
}
.clear-both {
    clear: both;
}
.nav-header {
    padding: 15px 0;
    border: none;
    background: #2b292a;
}
.nav-bar:after {
    clear: both;
    content: "";
    display: table;
}

.header-navbar-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
.header-navbar-nav>li {
    margin-left: 20px;
    float: left;
    position: relative;
}
.nav-header .header-navbar-nav>li >a {
    color: #FFF;
}
.nav-header .header-navbar-nav>li>a {
    display: block;
    height: 40px;
    margin: 0;
    border: none;
    text-shadow: none;
    font-size: 15px;
    text-decoration: none;
    padding: 0 15px;
    line-height: 40px;
    cursor: pointer;
}
.header-container {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 980px;
    padding: 0 25px;
}
.header-container-center, .footer-container-center {
    margin-left: auto;
    margin-right: auto;

}
.header-navbar-brand:before, .header-navbar-toggle:before
{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.header-navbar-brand, .header-navbar-toggle {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block; 
    height: 41px;
    padding: 0 15px;
    float: left;
    text-shadow: 0 1px 0 #fff;
    height: 40px;
    margin-top: 0;
    text-shadow: none;
}

.nav-header .header-navbar-toggle {
    height: 40px;
    margin-top: 0;
    text-shadow: none;
}
.header-navbar-toggle {
    font-size: 18px;
    color: #666;
    text-decoration: none;
    cursor: pointer;
}
.header-nav, .header-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.header-mobile-bar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    z-index: 1001;
    width: 270px;
    max-width: 100%;
    background: #333;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    -ms-scroll-chaining: none;
}
html .header-nav.header-nav-mobile>li >a {
    background: #1a1a1a;
    color: #fff;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
.header-nav-mobile>li>a {
    color: #ccc;
    padding: 10px 15px;
    border-top: 1px solid rgba(0,0,0,.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.header-nav li>a {
    display: block;
    text-decoration: none;
}
.header-mobile {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    touch-action: none;
    background: rgba(0,0,0,.1);
}

.header-navbar-center {
    float: none;
    text-align: center;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.header-navbar-toggle:after {
    content: "\f0c9";
    font-family: FontAwesome;
    vertical-align: middle;
}
.header-mobile-bar-show {
    /* -webkit-transform: translateX(0); */
    transform: translateX(0);
}
.overlay {
    background: none repeat scroll 0 0 #fff;
    display: none;
    float: left;
    height: 100%;
    left: 255px;
    opacity: 0;
    position: fixed;
    top: 60px;
    width: 100%;
    z-index: 1;
}

.site-middle {
    background: #fff;
}

.site-footer, .site-footer a {
    color: #ddd!important;
    background: #252525;
}
.site-text-center {
    text-align: center!important;
}
 /* container */
 #container {
     max-width:1365px;
     padding:0;
     background-color:#ffffff;
     margin: 0 auto;
 }

 #container .header {
     width:100%;
     height: 55px;
     border-bottom: 1px solid #006399;
     background-color:#118dcd;
 }
 #container .header .logo {
     display: inline-block;
    z-index: 1;
    position: relative;
    vertical-align: top;
 }
 #container .header .head-title {
     display:inline-block;
     height:53px;
     padding:10px;
     width:300px;
     text-align:center;
 }
  #container .header .head-title h1 {
      font: inherit;
      font-size: 20px;
    color: #fff;
    margin: 8px 0 10px;
    white-space: nowrap;
  }
  #container .content {
      
      width:100%;
      
  }
#container .content .top-bar {
    width:100%;
    background-color:#fff;
    padding:10px;
}
#container .content .top-bar ul {
    padding:0;
    margin:0;
    display:table;

}
#container .content .top-bar ul li {
    float:left;
    display:inline-block;
    padding:5px;
}
#container .content .top-bar ul li a {
    margin-right:20px;
}
#container .content .top-bar ul li a  i {
  margin-right: 5px;
}
#container .content .content-box {
    width:100%;
    min-height:100%;
    margin-top:10px;
}
#container .content .content-box .content-game {
    margin:0 auto;
    width:1165px;
    background-color:#fff;
    float:left;
    margin-left:10px;
}
#container .content .content-box .content-game .top-left {
    width:225px;
    float:left;
}
#container .content .content-box .content-game .top-left ul {
    padding:0;
    margin:0;
    display:table;
}
#container .content .content-box .content-game .top-left ul li {
    float:left;
    display:inline-block;
    margin-bottom:10px;
	padding-right:10px;
}
#container .content .content-box .content-game .top-left ul li span {
    display: block;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 3px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all .3s;
    width: 100px;
}

#container .content .content-box .content-game .top-right {
    width:130px;
    padding-top:30px;
    float:left;
}
#container .content .content-box .content-game .top-right ul {
    padding:0;
    margin:0;
    display:table;
}
#container .content .content-box .content-game .top-right ul li {
    float:left;
    display:inline-block;
    margin-bottom:10px;
}
#container .content .content-box .content-game .top-right ul li span {
    display: block;
    font-size: 13px;
    font-weight: bold;
    padding: 6px 8px;
    height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all .3s;

}
#container .content .content-box .content-game .game-show {
    width:940px;
    padding:0 10px 10px 10px;
    float:left;
}
#container .content .content-box .content-game .game-show  .head-game {
    width:100%;
    padding: 3px 0px;
    height: 30px;
}
#container .content .content-box .content-game .game-show  .head-game .breadcrumbs {
    float:left;
}
#container .content .content-box .content-game .game-show  .head-game .control {
    float:right;
}
#container .content .content-box .content-game .game-show .play-game {
    width: 100%;
}
#container .content .content-box .content-game .game-show .play-game .game-content {
    padding-bottom: 10px;
    text-align: center;
    max-height: 650px;
    overflow: hidden;
}
#container .content .content-box .ads-left:before {
    content: attr(data-ad-title);
    background-color: #118dcd;
    color: #fff;
    display: block;
    font-size: 9px;
    height: 15px;
    line-height: 15px;
    text-transform: uppercase;
    text-align: center;
}
#container .content .content-box .ads-left {
    height: 600px;
    width: 160px;
    float:left;
}
#container .content .content-box .ads-right:before {
    content: attr(data-ad-title);
    background-color: #118dcd;
    color: #fff;
    display: block;
    font-size: 9px;
    height: 15px;
    line-height: 15px;
    text-transform: uppercase;
    text-align: center;
}
#container .content .content-box .ads-right {
    height: 600px;
    width: 160px;
    float:left;
    margin-left:10px;
}
#container .content .content-box .content-game .social {
    width:100%;
    padding:10px;
    display:inline-block;
}
#container .content .content-box .content-game .game-info {

}
#container .content .content-box .content-game .game-info .thumb {
    float:left;
    margin-top:10px;
}
#container .content .content-box .content-game .game-info .thumb img {
    width:150px;
}
#container .content .content-box .content-game .game-info .description {
    margin-left: 170px;
    line-height: 1.5em;
    margin-top:5px;
}
#container .content .content-box .content-game .game-info .tags {
    margin-left: 170px;
    padding-top: 20px;
}
#container .content .content-box .content-game .game-info .tags a {
    text-decoration:underline;
    font-style:italic;
}
#container .content .content-games {
    width:100%;
    min-height:100%;
    margin-top:10px;
}
#container .content .content-games .inner-container {
    width:100%;
    padding:10px;
    background-color:#fff
}
#container .content .content-games .inner-container h3, #container .content .content-games .inner-container h2 {
    padding-bottom:20px;
    padding-top:10px;
}
#container .content .content-games .inner-container ul {
    padding:0;
    margin:0;
    display:table;
}
#container .content .content-games .inner-container ul li {
    float:left;
    display:inline-block;
    margin-bottom:10px;
    margin-right:10px;
	width:156px;
}
#container .content .content-games .inner-container ul li img {
    width:156px;
    height:156px;
    border:0;
}
#container .content .content-games .inner-container ul li span {
    display: block;
    font-size: 13px;
    font-weight: bold;
    padding: 6px 8px;
    height: 32px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all .3s;
}
#container .content .content-games .inner-container ul li span:hover{
    background-color:#006399;
    color:white;
}
#container .footer {
    padding:10px;
    background-color:#006399;
    min-height:50px;
    color:#ddd;
}
#container .footer ul {
    padding:0;
    margin:0;
    display:table;
}
#container .footer ul li {
    float:left;
    display:inline-block;
    margin:10px;
}
.ui-widget-overlay {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    background: #000!important;
    opacity: 0.8;
    display: none;
    z-index: 99;
}
/*----- Paging  ----- */
.paging {padding-bottom:10px;}
.paginate {margin:0; padding:0;}
.paginate li {display: inline; font-weight: bold; height: 30px; list-style: outside none none; width: 20px;}
.paginate  .title { margin-right: 4px;}
.paginate  .current {background-color: red;border-radius: 50%;color: white; margin-right: 4px;padding: 4px 8px;}
.paginate  a {;margin-right: 4px;padding: 4px 8px;text-align: center;text-decoration: none;}
/*----- Ads  ----- */
#ads-loading { background: #333 none repeat scroll 0 0; bottom: 0;height: 100%;text-align: center;top: 0; width: 100%;z-index: 99;}
#ads-status-loading { color: #999;padding-top: 30px;}
#ads-status-loading span {color: red;}
#ads-loading #ads-pre-loading {background: #fff none repeat scroll 0 0; height: 2px; left: 0; margin-left: 10%; margin-top: 30px; width: 80%;}
#ads-loading #ads-line-loading { background: #ccc none repeat scroll 0 0; border-radius: 40px; box-shadow: 0 0 10px 2px #0ff; height: 1px; margin: 0 auto;
  width: 0; z-index: 50;}
#ads-content {height: 480px; margin: 10px auto;padding-top: 20px;position: relative;width: 336px;z-index: 100;}
.ui-widget-overlay {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    background: #000!important;
    opacity: 0.8;
    display: none;
    z-index: 99;
}
.head-title
{
padding-top:8px;
color:red;
}
/*----- PC -----*/
@media only screen and (min-width: 1365px) and (max-width: 5000px) {
    #container {
        width:1350px;
    }
}
/*----- Mobile -----*/
@media only screen and (max-width: 604px) {
    #container .header {
        height: 85px;
        text-align:center;
    }
     #container .header .head-title {
         padding-top:0;
         width:100%;
         text-align:center;
         height:30px;
         
     }
     #container .header .head-title h1 {
         font-size: 15px;
         margin:0;
     }
}
@media only screen and (max-width: 990px) {
    #container .header {
        overflow:hidden;
    }
    #container .content .content-box .content-game {
        width:100%;
        margin-left:0;
    }
    #container .content .content-box .content-game .top-left {
        width:100%;
    }
    #container .content .content-box .content-game .top-left ul li {
        margin-right:10px;
    }
    #container .content .content-box .content-game .top-right {
        width:100%;
    }
    #container .content .content-box .content-game .top-right ul li {
        margin-right:10px;
    }
    #container .content .content-box .content-game .game-show {
        width:100%;
        padding-left:0;
    }
    #container .content .content-box .ads-left {
        width:100%;
        padding:10px;
        height:auto;
    }
    #container .content .content-box .ads-right {
        width:100%;
        padding:10px;
        height:auto;
        margin-left:0;
    }
}
@media (min-width: 1320px) {
    .header-container {
        max-width: 1320px;
        padding: 0 35px;
    }
    .site-middle {
        padding: 20px 0;
    }
    .games-container {
    max-width: 1320px;
    
    margin-left: auto;
    margin-right: auto;
    }
    .site-footer {
    padding: 70px 0;
    }
	.games-container .games-main .games-right .games-info .games-play .games-box {
		height: 600px;
		overflow:hidden
	}
}
@media (min-width: 960px) {
    .header-visible-min {
        display: none !important;
    }
    .site-footer {
    padding: 70px 0;
    }
}

@media (max-width: 959px) and (min-width: 768px) {
    .header-visible-min {
        display: none !important;
    }
    .site-footer{
    padding: 30px 0;
    }
}
@media (max-width: 767px) {
    .header-hidden-min {
        display: none !important;
    }
    .site-middle {
        padding: 15px 0;
    }
    .site-footer{
    padding: 30px 0;
    }
}