/* @override http://eg.epicdev.net/site/_home-css */

/* ---------------------------------------------------------------------------
	Home Feature styles
--------------------------------------------------------------------------- */
/* */
body#home .game-tab { display: none; position: relative; overflow: visible; }
body#home .game-tab:first-child { display: block; }

body#home .tab-content h1,
body#home .tab-content h2 { display: none; }
.tab-content p { text-indent: -99999em; }
/* */

body#home .game-tab object { vertical-align: middle; }
/*body#home .game-tab .close { background-color: #222; display: block; padding: 6px 12px; text-align: center; position: absolute; top: 10px; left: 100%; }*/
body#home .close {
  background: url(../img/close_btn.png) no-repeat 0 0;
  display: block;
  text-indent: -9999px;

  width: 30px;
  height: 30px;

  position: absolute;
    top: -15px;
    right: -15px;
}

body#home .game-tab .video-sd,
body#home .video-hd {
  background-color: rgba(55,55,55,0.9);
  color: #fff;
  display: none;
  z-index: 9999;

  position: absolute;

  border: 2px solid #555;
  /*
  box-shadow: 0 0 15px rgba(255,255,255,0.5);
  -webkit-box-shadow: 0 0 15px rgba(255,255,255,0.5);
  -moz-box-shadow: 0 0 15px rgba(255,255,255,0.5);
  */
}

body#home .game-tab .video-sd {
  width: 540px;
  height: 304px; /* 304 + 22 for controller height */

  top: 30px;
  left: 30px;
}

body#home .video-hd {
  width: 960px;
  height: 540px;

  position: fixed;
    top: 50%;
    left: 50%;

  margin-top: -270px;
  margin-left: -480px;

  border: 2px solid #555;

  /*
  box-shadow: 0 0 145px rgba(255,255,255,0.5);
  -webkit-box-shadow: 0 0 145px rgba(255,255,255,0.5);
  -moz-box-shadow: 0 0 145px rgba(255,255,255,0.5);
  */
}

.tab-visual {
	width: 945px;
  position: relative;
  z-index: 0;
}

.tab-visual .tab-holder {
  height: 600px;
  overflow: hidden;
  position: relative;
  z-index: 100;
  background-color: #262626;
}

/* */
#home .tab-visual .game-tab {
  height: 600px;
  padding: 0;
}

/* feature cycle */
#home .tab-visual ul.slides {
  list-style: none;
  margin: 0;
}

#home .tab-visual ul.slides li.tab {
  /*background: 0 0 no-repeat;*/
  display: none;
  position: absolute;
    top: 0;
    left: 0;
}

#home .tab-visual ul.slides li.active {
  display: block;
  z-index: 2;
}
#home .tab-visual ul.slides li.active>a{
  display: block;
  width: 100%;
  height: 100%;
}
#home .tab-visual ul.slides li.staged {
  display: block;
  z-index: 3;
}

#home .tab-visual .pagination {
  background-color: #262626;
  display: block;
  overflow: hidden;
  padding: 0px 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110px;
  margin: 0;
  z-index: 10;
}

#home .tab-visual .pagination ul {
  margin-left: 0 !important;
  padding-left: 0;
  overflow: hidden;
  display: block;
  list-style: none;
  margin: 0;
}

#home .tab-visual .pagination li {
  cursor: pointer;
  float: left;
  margin-left: 12px;
  position: relative;
  width: 179px;
  height: 100%;
  display: block;
  padding-top: 22px;
}
#home .tab-visual .pagination li:first-child{
  margin-left: 0px;
}
#home .tab-visual .pagination li a {
  display: block;
  width: 179px;
  height: 66px;
  -webkit-transition: all 0.2s linear;
}
#home .tab-visual .pagination li a img {
  opacity: 0.3;
  -moz-opacity: 0.3;
  filter:alpha(opacity=30);
  width: 179px;
}

#home .tab-visual .pagination li.active a img,
#home .tab-visual .pagination li a:hover img {
  opacity: 1;
  -moz-opacity: 1;
  filter:alpha(opacity=100);
}

.home-pager {
  cursor: pointer;
  text-indent: -9999px;
  position: absolute;
  top: 265px;
  width: 45px;
  height: 45px;
  z-index: 200;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /* IE 5-7 */
    filter: alpha(opacity=50);

    /* Netscape */
    -moz-opacity: 0.5;

    /* Safari 1.x */
    -khtml-opacity: 0.5;

    /* Good browsers */
    opacity: 0.5;
  transition:opacity .3s ease-in-out;
}
.home-pager:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    /* IE 5-7 */
    filter: alpha(opacity=100);

    /* Netscape */
    -moz-opacity: 1;

    /* Safari 1.x */
    -khtml-opacity: 1;

    /* Good browsers */
    opacity: 1;
}

.home-prev {
  background: transparent url(../img/homePagerNew.svg) 0 0 no-repeat;
  left: -50px;
}
.home-next {
  background: transparent url(../img/homePagerNew.svg) 0 0 no-repeat;
  right: -50px;
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}

/* @group timer */

.timer {
  background: #000;
  background: rgba(0,0,0,0.75);
  list-style: none;
  margin: 0;

  padding: 3px;
  position: absolute;
    right: 10px;
    top: 10px;

  width: 40px;
  height: 13px;

  z-index: 100;
}

.timer li {
  background: #666;
  background: rgba(255,255,255,0.15);
  margin-bottom: 2px;
  overflow: hidden;

  width: 40px;
  height: 3px;
}

.timer li span {
  background: #9c9c9c;
  border-right: 1px solid rgba(255,255,255,0.35);
  display: block;

  position: relative;
    left: -41px;

  width: 40px;
  height: 3px;
}

.tab-info{
  position: absolute;
  bottom: 53px;
  height: 22px;
  padding: 10px 10px;
  left: 0;
  width: 926px;
  background: #000;
  background: rgba(0,0,0,0.67);
  }
.tab-info p{
  font-weight: bold;
  text-shadow: 1px 2px 3px rgba(0,0,0,0.47);
  font-size: 13px;
  -webkit-font-smoothing:antialiased;
  margin: 0;
  color: #ccc;

}
.tab-more{
  position: absolute;
  top: 0;
  float: left;
  width: 70%;
  margin: 0;
}
.tab-more img{
	position: relative;
  top: 3px;
  margin-left: 4px;
}
.tab-info a{
	font:bold 13px "Helvetica Neue", Arial, Helvetica, sans-serif;
	color:#ff9915;
	text-decoration:none;
	letter-spacing:1px;
	display: inline;
}
.tab-info a:hover{
	color:#c4c4c4;
}
.trailer{
	margin: 0;
	outline:none;
}
.tab-detalis{
  position: absolute;
  top: 0;
  right: 10px;
  width: 250px;
  margin-top: 8px;
}
.tab-detalis p{
  text-align: right;
  font-size: 16px;
}
.tab-detalis a{
  padding: 4px 8px;
  margin: 0 2px;
  line-height: 2;
  -webkit-border-radius:5px;
  -moz-border-radius: 5px;
  border-radius:5px;
  background: #171614;
}
.tab-detalis a:hover{
  background: #0d0c0b;
}

/* @end */