@import url('//fonts.googleapis.com/css?family=Julee|Shojumaru|Vampiro+One|Ceviche+One');

body {
	background-color: black;
	background-position: center top;
	background-repeat: no-repeat;
	overflow-x: hidden;
	font-family: 'Julee', cursive;
	font-size: 18px;
	color: white;
	background-image: url('../background/generic.jpg') !important;
}

.hidden 
{
	opacity:0;	
	transition: opacity 1.5s linear;
   -webkit-transition: opacity 1.5s linear;
   -moz-transition: opacity 1.5s linear;
   -o-transition: opacity 1.5s linear;
}

.shown 
{
	opacity:1 !important;	
	transition: opacity 1.5s linear;
   -webkit-transition: opacity 1.5s linear;
   -moz-transition: opacity 1.5s linear;
   -o-transition: opacity 1.5s linear;
}

a img {  
	border: none;
}

#bannerdiv {
	z-index: 3;
}

#menu {
    position: relative;
    z-index: 11;
}

#menu_esrb_logo {
	position: fixed !important;
	left: 20px !important;
	bottom: 20px !important;
	z-index: 10;
}

#privacypolicy {
	position: fixed;
	bottom: 20px; right: 20px;
	background-color: #FFF;
	width: auto;
	padding: 3px 10px 2px;
	margin-top: 10px;
	color: #000;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	z-index: 10;
	font-size: 12px;
}

#privacypolicy:hover {
	color: #000;
	font-weight: bold;
	padding: 3px 7px 2px;
}

footer a {
	margin-bottom: 0;
}

section#content {
	line-height: 19px;
}

div#dev_logos {
	position: absolute;
	bottom: -180px;
	width: 580px;
	text-align: center;
}

div#dev_logos.agegate {
	position: fixed;
	bottom: 10px;
	width: 580px;
	text-align: center;
}

#legal {
	position: absolute;
	top: 800px;
	left: 168px;
}

.de #legal, .fr #legal {
	top: 950px;
}

.it #legal {
	top: 880px;
}

.es #legal {
	top: 880px;
}


/* -----------------------------------------------*/
/* ----------------- Animations ------------------*/
/* -----------------------------------------------*/



@-webkit-keyframes grow {
  from { -webkit-transform: scale(0) ; }
  to   { -webkit-transform: scale(1) ; }
}
@-moz-keyframes grow {
  from { -moz-transform: scale(0) ; }
  to   { -moz-transform: scale(1) ; }
}
@keyframes grow {
  from { transform: scale(0) ; }
  to   { transform: scale(1) ; }
}

h1.hidden {
	-webkit-animation: none;
	-moz-animation: none;
	animation: none;
	-moz-transform: scale(0) ;
	-webkit-transform: scale(0) ;
	transform: scale(0) ;
	opacity: 0;
}

h1 {
	-webkit-animation: grow 1.5s ease-out;
	-moz-animation: grow 1.5s ease-out;
	animation: grow 1.5s ease-out;
	opacity: 1;
}

@-webkit-keyframes rise {
  from { -webkit-transform: translate(0, 2000px);}
  to   { -webkit-transform: translate(0, 0);}
}
@-moz-keyframes rise {
  from { -moz-transform: translate(0, 2000px);}
  to   { -moz-transform: translate(0, 0);}
}
@keyframes rise {
  from { transform: translate(0, 2000px) ;}
  to   { transform: translate(0, 0) ;}
}



/* ----------------------------------------*/
/* ---------------- Sound -----------------*/ 
/* ----------------------------------------*/


#mute_bar
{
	background-image:url("../images/sound/control_background.png");
	background-repeat:no-repeat;
	position: absolute !important;
	background-position: 1px 5px;
	width:144px;	
	height:20px;
	top: 80px !important;
	left: -166px !important;
}


#mute_bar input#volumeControl
{
	padding: 0px;
	background-image:url("../images/sound/level_bar.png");
	background-repeat:no-repeat;
	background-color: transparent;
	height: 5px;
	position: relative;
	left: 4px;
	top: -1px;
	width: 106px;	
	-webkit-border-radius: 0 !important;
	-webkit-box-shadow: none !important;
	-moz-border-radius: 0 !important;
	-moz-box-shadow: none !important;
	-o-border-radius: 0 !important;
	-o-box-shadow: none !important;
	-ms-border-radius: 0 !important;
	-ms-box-shadow: none !important;
	border-radius: 0 !important;
	border: none;
	box-shadow: none !important;
	cursor: pointer;
}

	
#mute_bar input#volumeControl::-moz-range-track {
  -moz-appearance: none;
	background-image:url("../images/sound/level_bar.png");
	background-repeat:no-repeat;
	background-color: transparent;
	border: 0;
	border-radius: 0 !important;
	box-shadow: none !important;
	-moz-border-radius: 0 !important;
	-moz-box-shadow: none !important;
	height: 5px;
}

div#mute_bar div#muteControl
{
	width: 30px;
	height: 30px;
	position:relative;
	top: -15px;
	left: 126px;	
}

div#mute_bar div#muteControl div#muted
{
	background-image:url("../images/sound/mute_on.png");
	background-repeat:no-repeat;
	width:30px;
	height:30px;
}

div#mute_bar div#muteControl div#unmuted
{
	background-image:url("../images/sound/mute_off.png");
	background-repeat:no-repeat;
	width:30px;
	height:30px;
}

#mute_bar #ie_slider {
	position: absolute;
	left: 0px; top: 5px;
    background-image:url("../images/sound/slider.png");
    background-repeat:none;
    width: 17px; 
    height: 17px;
}

input#volumeControl::-webkit-slider-thumb {  
    -webkit-appearance: none;  
    background-image:url("../images/sound/slider.png");
    background-repeat:none;
    height:17px;
    width:17px;
} 

input#volumeControl::-moz-range-thumb {  
    -moz-appearance: none; 
    appearance: none; 
    background-image:url("../images/sound/slider.png");
    background-repeat:none;
    height:17px;
    width:17px;
    border: 0;
} 

@-moz-document url-prefix()
{
	div#mute_bar div#muteControl
	{
		top:-16px;	
	}
	#mute_bar input#volumeControl {
		left: 0px;
		top: -1px;
	}
}




/* -----------------------------------------------*/
/* -------------------- Menu ---------------------*/
/* -----------------------------------------------*/

#s2tw_menu {
	text-align: center;
	width: 681px;
	height: 44px;
	margin: -7px 0 0;
	background: url('../images/menu/frame.png') no-repeat top center transparent;
	padding: 0 0 0 10px;
	z-index: 10;
}

#s2tw_menu, #s2tw_menu li {
	list-style: none;
	font-size: 16px;
	font-weight: bold;
}

#s2tw_menu li {
	list-style: none;
	display: inline-block;
	margin: 3px 0 0;
	padding: 6px 5px 0;
}

.de #s2tw_menu li, .es #s2tw_menu li, .it #s2tw_menu li {
	padding: 6px 1px 0;
	font-size: 15px;
}

#s2tw_menu li#menu_home {
	background: url('../images/menu/setting.png') no-repeat bottom center transparent;
	background-size: 100% 42px;
	height: 36px;
}

#s2tw_menu li#menu_features {
	background: url('../images/menu/features.png') no-repeat bottom center transparent;
	background-size: 100% 45px;
	height: 37px;
}

#s2tw_menu li#menu_history {
	background: url('../images/menu/history.png') no-repeat bottom center transparent;
	background-size: 100% 43px;
	height: 37px;
}

#s2tw_menu li#menu_dlc {
	background: url('../images/menu/dlc.png') no-repeat bottom center transparent;
	background-size: 100% 42px;
	height: 36px;
}

#s2tw_menu li#menu_media {
	background: url('../images/menu/media.png') no-repeat bottom center transparent;
	background-size: 100% 42px;
	height: 36px;
	margin: 3px -3px 0 4px;
}

#s2tw_menu li#menu_links-requirements {
	background: url('../images/menu/links-requirements.png') no-repeat bottom center transparent;
	background-size: 100% 43px;
	height: 37px;
	padding: 5px 10px 0;
}

.ru #s2tw_menu li a {
	font-size:11px;
	padding:5px 7px;
}

#s2tw_menu li a {
	display: inline-block;
	margin: 0;
	padding: 5px 10px;
	text-decoration: none;
	text-transform: uppercase;
	color: #ff0000;
	text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 6px black, 0px 0px 2px #482400, 0px 0px 3px #482400, 0px 0px 5px #482400, 0px 0px 2px #482400, 0px 0px 3px #482400, 0px 0px 5px #482400;
	transition: background 0.3s linear, color 0.3s linear;
   -webkit-transition: background 0.3s linear, color 0.3s linear;
   -moz-transition: background 0.3s linear, color 0.3s linear;
   -o-transition: background 0.3s linear, color 0.3s linear;
}

#s2tw_menu li#menu_dlc a {
	height: 16px;
}

#s2tw_menu li#menu_media a {
	height: 16px;
}

#s2tw_menu li a:hover {
	color: white;
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

#s2tw_menu li.current_page {
	
}

#s2tw_menu li.current_page a {
	color: white;
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

h1 {
	left: 265px;
	position: absolute;
	top: 40px;
	margin: 0; 
	padding: 0;
	background: url('../images/logo-onred.png') no-repeat transparent;
}


h1 img {
	opacity: 1;
}




/* -----------------------------------------------*/
/* ------------------- Story ---------------------*/
/* -----------------------------------------------*/

sup {
	position: relative;
	display: inline-block;
	margin-top: -5px;
	top: 2px;
}

#shogun.hidden {
	opacity: 0;
}

#shogun {
	position: absolute;
	z-index: -1;
	top: -85px;
	left: -313px;
	opacity: 1;
}



h2#comingorout {
	position: absolute;
	top: 200px;
	line-height: 27px;
	left: 70px;
	width: 900px;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 26px;
		
	text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black; /*0px 0px 6px #b32800, 0px 0px 2px #b32800, 0px 0px 3px #b32800, 0px 0px 5px #b32800, 0px 0px 20px #b32800, 0px 0px 13px #b32800, 0px 0px 10px #b32800;*/
		
	transition: opacity 1.5s linear, color 0.2s linear, text-shadow 0.2s linear;
   -webkit-transition: opacity 1.5s linear, color 0.2s linear,  text-shadow 0.2s linear;
   -moz-transition: opacity 1.5s linear, color 0.2s linear,  text-shadow 0.2s linear;
   -o-transition: opacity 1.5s linear, color 0.2s linear,  text-shadow 0.2s linear;
   letter-spacing: 1px;
}


div#home_trailer
{
		
	position:absolute;
	top: 402px;
	left: -138px;
	width: 544px;
	height: 306px;
	opacity: 1;
	-webkit-transition:opacity 2s linear;
	-moz-transition:opacity 2s linear;
	-o-transition:opacity 2s linear;
	-ms-transition:opacity 2s linear;
	transition:opacity 2s linear;
	
}

h3 {
	border-bottom: 6px #5b1110 solid;
	text-transform: uppercase;
	padding-bottom: 10px;
	margin-bottom: 3px !important;
}

div#home_trailer.hidden
{
	opacity: 0; /*Change for animation*/
}

div#home_trailer video
{
	border:none;
	top:0;
	left:0;
	width:544px;
	height:306px;	
}


.trailerframe {
	position: absolute;
	width: 639px;
	height: 411px;
	top: -55px;
	left: -47px;
	background: url('../images/holder/trailerframe.png') no-repeat transparent;
	pointer-events: none;
}

.ru #story_text {
	font-size:14px;
}

.ru #legal{
	top:850px;
}
.ru.dlc #legal{
	top:845px;
}
.ru #dlcnote{
	font-size:12px;
}

.ru div#requirements_text dl dt{
	min-width:165px;
}

.ru #links-requirements_text{
	font-size:16px;
}

#story_text {
	
	-webkit-transition:opacity 2s linear;
	-moz-transition:opacity 2s linear;
	-o-transition:opacity 2s linear;
	-ms-transition:opacity 2s linear;
	transition:opacity 2s linear;
	
	background: url('../images/holder/latestnewstop.png') no-repeat transparent;
	position: absolute;
	padding: 53px 70px 190px;
	top: 272px;
	left: 441px;
	width: 265px;
	text-shadow: 0px 0px 10px black;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	margin-bottom: 300px;
}

#story_text p {
	
}

#story_text p:last-child {
	position: absolute;
	bottom: -65px;
	background: url('../images/holder/latestnewsbottom.png') no-repeat transparent left bottom;
	height: 177px;
	width: 265px;
	left: 0px;
	padding: 20px 70px 60px;
}

.de #story_text p:last-child {
	bottom: -95px;
	padding-bottom: 90px;
}

.fr #story_text p:last-child {
	bottom: -85px;
	padding-bottom: 80px;
}

.it #story_text p:last-child {
	bottom: -45px;
	padding-bottom: 40px;
}

.es #story_text p:last-child {
	bottom: -35px;
	padding-bottom: 30px;
}


/* -----------------------------------------------*/
/* ------------------ Features -------------------*/
/* -----------------------------------------------*/

#featurestop {
	z-index: -1;
	position: absolute;
	top: -86px;
	left: -150px;
}

.features h1, body.history h1, .dlc h1, .media h1, .links-requirements h1 {
	left: 50px;
	position: absolute;
	background: none;
}


.features h1 img, body.history h1 img, .dlc h1 img, .media h1 img, .links-requirements h1 img {
	opacity: 1;
}

.features #legal {
	top: 1400px;
	left: 138px;
}

.de.features #legal {
	top: 1500px;
}

.fr.features #legal {
	top: 1550px;
}

.it.features #legal {
	top: 1300px;
}

div#features_content div#features_text
{
	position: absolute;
	top: 210px;
	left: 112px;
	width: 345px;		
	
	-webkit-transition:opacity 1s linear;
	-moz-transition:opacity 1s linear;
	-o-transition:opacity 1s linear;
	-ms-transition:opacity 1s linear;
	transition:opacity 1s linear;
	
	background:url('../images/features/canvas.png') no-repeat;
	background-size: 100% 100%;
	padding: 25px 25px 40px;
}

.features h4 {
	margin-top: 10px;
	z-index: 5;
	width: 345px;
	position: absolute;
}

.features h4 a {
	display: inline-block;
	width: 48%;
	height: 30px;
	font-size: 14px;
	color: white;
	background: #360605;
	padding: 2px;
	text-decoration: none;
	
	-webkit-transition:color 0.3s linear;
	-moz-transition:color 0.3s linear;
	-o-transition:color 0.3s linear;
	-ms-transition:color 0.3s linear;
	transition:color 0.3s linear;
}

.features h4 a:hover {
	color: red;
}

span.platformlogo {
	display: inline-block;
	width: 40px;
	height: 30px;
	text-indent: -999em;
	position: relative;
}

a.stm span.platformlogo {
	background: url('../images/features/steam.png') no-repeat transparent;
	background-size: 30px;
}

a.mas span.platformlogo {
	background: url('../images/features/appstore.png') no-repeat transparent;
	background-size: 30px;
}

span.platformtitle {
	position: relative;
	top: -10px;
}

.features h3 {
	margin-top: 7px;
	color: #451805;
}

div#features_text > div {
	opacity: 1;
	z-index: 2;
	padding-right: 30px;
	padding-top: 20px;
	
	-webkit-transition:opacity 0.5s linear;
	-moz-transition:opacity 0.5s linear;
	-o-transition:opacity 0.5s linear;
	-ms-transition:opacity 0.5s linear;
	transition:opacity 0.5s linear;
	pointer-events: none;
}

.features h5 {
	color: #451805;
	margin-bottom: 10px;
	font-size: 15px;
}


div#features_text ul#features_list
{
	text-decoration: none;
	color: #451805;
	margin: 0;
	padding: 0;
}

div#features_text ul#features_list li
{
	list-style:none;
	padding-bottom:15px;
	padding-left:30px;
	background:url('../images/features/bullet.png') no-repeat 0 4px;	
	font-size: 16px;
	line-height: 22px;
	
	-webkit-transition:opacity 1s linear;
	-moz-transition:opacity 1s linear;
	-o-transition:opacity 1s linear;
	-ms-transition:opacity 1s linear;
	transition:opacity 1s linear;
}

div#features_text ul#features_list li:last-child
{
	padding-bottom:0px;	
}






div#screenshots_thumbs a img
{
	position:absolute;	
/*	box-shadow: 0px 0px 15px rgba(3, 3, 3, 0.6), 0px 0px 30px rgba(3, 3, 3, 0.6);*/
	
	-webkit-transition:-webkit-transform 1.5s ease-out, border 0.3s linear;
	-moz-transition:-moz-transform 1.5s ease-out, border 0.3s linear;
	-o-transition:-o-transform 1.5s ease-out, border 0.3s linear;
	-ms-transition:-ms-transform 1.5s ease-out, border 0.3s linear;
	transition:transform 1.5s ease-out, border 0.3s linear;	
	
	width: 230px;
	border: 3px solid #451805;
}

div#screenshots_thumbs a:hover img {
	border: 3px solid red;
}

div#screenshots_thumbs a:nth-child(2).hidden img,
div#screenshots_thumbs a:nth-child(4).hidden img,
div#screenshots_thumbs a:nth-child(7).hidden img,
div#screenshots_thumbs a:nth-child(9).hidden img
{
	-webkit-transform:translateX(-700px);
	-moz-transform:translateX(-700px);
	-o-transform:translateX(-700px);
	-ms-transform:translateX(-700px);
	transform:translateX(-700px);	
}

div#screenshots_thumbs a:nth-child(3).hidden img, 
div#screenshots_thumbs a:nth-child(5).hidden img,
div#screenshots_thumbs a:nth-child(6).hidden img, 
div#screenshots_thumbs a:nth-child(8).hidden img
{
	-webkit-transform:translateX(1400px);
	-moz-transform:translateX(1400px);
	-o-transform:translateX(1400px);
	-ms-transform:translateX(1400px);
	transform:translateX(1400px);	
}

div#screenshots_thumbs a img#screen1
{
	top: 193px;
	left: -161px;	
}

div#screenshots_thumbs a img#screen2
{
	top: 368px;
	left: -143px;	
}

div#screenshots_thumbs a img#screen3
{
	top: 543px;
	left: -161px;	
}

div#screenshots_thumbs a img#screen4
{
	top: 719px;
	left: -143px;	
}

div#screenshots_thumbs a img#screen5
{
	top: 193px;
	left: 549px;	
}

div#screenshots_thumbs a img#screen6
{
	top: 368px;
	left: 531px;	
}

div#screenshots_thumbs a img#screen7
{
	top: 543px;
	left: 549px;	
}

div#screenshots_thumbs a img#screen8
{
	top: 719px;
	left: 531px;	
}



#screenshots_full .image_popup {
	display: block;
	pointer-events:none;
}

div#screenshots_full div:target
{
	display: block;	
	pointer-events:auto;
	z-index: 999;
}

.imgbox {
	position: relative;
	width: 960px;
	max-width: 97%;
	margin: 0 auto;
}

.close_button {
	top: 15px;
	left: -13px;
	position: absolute;
	width: 1px;
	height: 1px;
	text-align: left;
	z-index: 2;
}

.image_popup:target .close_button {
	width: 100%;
	height: 100%;
}

.image_popup .imgbox > img {
	position: relative;
	top: 26px;
	border: 3px white solid;
	width: 100%;
}

.close_button > img {
	position: relative;
	top: 0;
	border: none;
}

.image_popup:target {
	opacity: 1;
	z-index: 999;
}

.image_popup {
	width: 100%;
	height: 100%;
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	z-index: 1;
	background: rgba(0,0,0,0.7);
	vertical-align: middle;
	text-align: center;
	opacity: 0;
	-webkit-transition: opacity 1.2s cubic-bezier(0,0,0,1);
	-moz-transition:opacity 1.2s cubic-bezier(0,0,0,1);
	-o-transition:opacity 1.2s cubic-bezier(0,0,0,1);
	transition:opacity 1.2s cubic-bezier(0,0,0,1);
}





/* -----------------------------------------------*/
/* ----------------- History ---------------------*/
/* -----------------------------------------------*/


body.history #legal {
	top: 850px;
}

#history_content {
	text-shadow: 0 0 1px #f2e0be, 0 0 5px #f2e0be, 0 0 10px #f2e0be;
}

#history_heading {
	position: absolute;
	top: 230px;
	left: -80px;
	width: 160px;
	z-index: 5;
	color: #451805;
}

#history_menu {
	position: absolute;
	top: 200px;
	left: -90px;
	border-top: 5px solid #451805;
	width: 165px;
	height: 515px;
	padding: 80px 0 0 15px;
	line-height: 30px;
	list-style: none;
	background: url('../images/history/historymenu.png') no-repeat top left;
}

#history_menu a {
	color: #451805;
	border-left: 4px solid red;
	padding-left: 10px;
	text-decoration: none;
		-webkit-transition:border 0.3s linear, background-position 0.3s linear;
	-moz-transition:border 0.3s linear, background-position 0.3s linear;
	-o-transition:border 0.3s linear, background-position 0.3s linear;
	-ms-transition:border 0.3s linear, background-position 0.3s linear;
	transition:border 0.3s linear, background-position 0.3s linear;
	display: inline-block;
	width: 140px;
	line-height: 21px;
	height: 21px;
	background: url('../images/history/current.png') no-repeat -142px center;
}

#history_menu a:hover {
	
	border-left: 9px solid red;
}

#history_menu li a.current {
	border-left: #5b1110 solid 9px; 
	background: url('../images/history/current.png') no-repeat -10px center;
}

div#history_panels > div {
	opacity: 0;
	z-index: 1;
	position: absolute;
	top: 140px;
	padding-right: 30px;
	padding-top: 50px;
	left: 100px;
	
	-webkit-transition:opacity 0.5s linear;
	   -moz-transition:opacity 0.5s linear;
	    -ms-transition:opacity 0.5s linear;
	     -o-transition:opacity 0.5s linear;
	        transition:opacity 0.5s linear;
}

div#history_panels > div:target {
	opacity: 1;
	z-index: 2;
}

div#history_panels img, div#history_panels video {
	
	width:540px;
	height:303px;
	padding: 56px 51px;
	background: url('../images/holder/trailerframe.png') no-repeat top left;
}

div#history_panels h4 {
	position: relative; 
	top: -7px;
	left: 75px;
	height: 30px;
	padding: 0;
	margin: 0;
	color: #451805;
	text-transform: uppercase;
}

div#history_panels p {
	background:url('../images/history/canvas.png') no-repeat;
	background-size: 100% 100%;
	padding: 55px 30px 25px;
	width: 480px;
	margin-left: 50px;
	color: #451805;
	margin-top: -60px;
	line-height: 24px;
}

div#history_panels p a {
	color: #0054b2;
	font-weight: bold;
	-webkit-transition: color 0.2s linear;
	   -moz-transition: color 0.2s linear;
	    -ms-transition: color 0.2s linear;
	     -o-transition: color 0.2s linear;
	        transition: color 0.2s linear;
	
}

div#history_panels p a:hover {
	color: #9e0404;
}

/* -----------------------------------------------*/
/* ------------------- DLC -----------------------*/
/* -----------------------------------------------*/

.dlc #legal {
	top: 820px;	
}

.de.dlc #legal, .fr.dlc #legal, .it.dlc #legal, .es.dlc #legal {
	top: 880px;	
}

.dlc #history_menu {
	padding-top: 75px;
	background: url('../images/dlc/dlcmenu.png') no-repeat top left;
	line-height: 25px;
}

.dlc #history_menu a {
	font-size: 16px;
}

#dlcnote {
	position: absolute;
	top: 510px;
	left: -70px;
	width: 140px;
	color: #451805;
	font-size: 15px;
	line-height: 18px;
}

.fr #dlcnote {
	font-size: 14px;
	line-height: 16px;
}

#dlcnote2 {
	margin-top: 10px;
}

a .menuhide {
	display: inline-block;
	overflow: hidden;
	font-size: 10px;
	width: 1px;
}

/* -----------------------------------------------*/
/* --------------------- Media -------------------*/
/* -----------------------------------------------*/

.media #local {
	z-index:3;
}

.de.media #legal, .fr.media #legal, .it.media #legal, .es.media #legal {
	top: 800px;	
}

#mediaback {
	position: absolute;
	z-index: -1;
	top: -86px;
	left: -348px;
	opacity: 1;
	-webkit-transition:opacity 1s linear;
	-moz-transition:opacity 1s linear;
	-o-transition:opacity 1s linear;
	-ms-transition:opacity 1s linear;
	transition:opacity 1s linear;
}



#mediaback.hidden {
	opacity: 0;
}

.media h3 {
	position: absolute;
	border: none;
	width: 200px;
	text-align: center;
	top: 167px;
	left: 200px;
}


div#media_logos li:hover h2 img
{
	opacity:0;	
}

ul#shogun2tw_media_menu > li
{
	-webkit-transition:-webkit-transform 1s ease-out;
	-moz-transition:-moz-transform 1s ease-out;
	-o-transition:-o-transform 1s ease-out;
	-ms-transition:-ms-transform 1s ease-out;
	transition:transform 1s ease-out;
	background-position: 0px 17px;
	width: 209px;
	position:absolute;
}

ul#shogun2tw_media_menu > li.hidden
{
	-webkit-transform:scale(0.0);
	-moz-transform:scale(0.0);
	-o-transform:scale(0.0);
	-ms-transform:scale(0.0);
	transform:scale(0.0);	
}


div#media_logos li h2 {
	position: absolute;
	top: 190px;
	left: -2px;
	width: 490px;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 0 3px #8e0808, 0 0 10px #8e0808, 0 0 30px #8e0808;
	font-weight: normal;
	font-size: 28px;
	color: black;
	transition: opacity 1.5s linear, color 0.2s linear, text-shadow 0.2s linear;
   -webkit-transition: opacity 1.5s linear, color 0.2s linear,  text-shadow 0.2s linear;
   -moz-transition: opacity 1.5s linear, color 0.2s linear,  text-shadow 0.2s linear;
   -o-transition: opacity 1.5s linear, color 0.2s linear,  text-shadow 0.2s linear;
	width: auto;
	border-bottom: 0;
}

div#media_logos li h2 img
{
	-webkit-transition:opacity 0.3s linear;
	-moz-transition:opacity 0.3s linear;
	-o-transition:opacity 0.3s linear;
	-ms-transition:opacity 0.3s linear;
	transition:opacity 0.3s linear;
		
}

div#media_logos li#media_screenshots_button {
	top: 152px;
	left: 30px;	
}

div#media_logos li#media_movie_button {
	top: 151px;
	left: 458px;
}

div#media_logos li#media_desktops_button {
	top: 233px;
	left: 242px;
}

div#media_logos li#media_screenshots_button h2 {
	background-image:url('../images/media/screenshots-hover.png') !important;	
}

div#media_logos li#media_movie_button h2 {
	background-image:url('../images/media/trailers-hover.png') !important;	
}

div#media_logos li#media_desktops_button h2 {
	background-image:url('../images/media/desktops-hover.png') !important;	
}




#media_links li span {
	
	display:block !important;
	position: absolute;
	text-decoration:none;
	font-size:15px !important;
	width: 148px;
	text-align: center;
	color: white;
	text-transform:uppercase;
	opacity:0;
	
	text-shadow:0px 0px 2px #400803, 0px 0px 6px #400803, 0px 0px 10px #400803, 0px 0px 12px #400803, 
		0px 0px 14px #400803, 0px 0px 16px #400803;
	
	-webkit-transition:opacity 0.3s linear;
	-moz-transition:opacity 0.3s linear;
	-o-transition:opacity 0.3s linear;
	-ms-transition:opacity 0.3s linear;
	transition:opacity 0.3s linear;
		
}

#media_links li h2:hover span 
{
	opacity:1;		
}

li#media_screenshots_button span
{
	top: 49px;
}

li#media_desktops_button span
{
	top: 43px;
	left: -1px;
}


li#media_movie_button span
{
	top: 48px;
	left: -1px;
}

.media #desktops > div > ul > li > ul a {
	color: #ad0000;
}

.media #desktops > div > ul > li > ul a:hover {
	color: white;
}

.media #desktops div p {
	font-size: 18px;
}

.popup > div figure{
	margin: 0;
}

.popup.single_screenshot a.media_next_button {
	top: 260px;
}

.popup.single_screenshot a.media_prev_button {
	top: 260px;
}

.popup h1 {
	position: static !important;
}


.media #screenshots ul li a img {
	width: 160px;
}



/* -----------------------------------------------*/
/* ------------------ Links & Reqs ---------------*/
/* -----------------------------------------------*/

body.links-requirements {
	background-image:url('../background/links.jpg') !important;
}

#linksright {
	position: absolute;
	z-index: -1;
	top: -72px;
	left: 183px;
	opacity: 1;
}

#linksleft {
	position: absolute;
	z-index: -1;
	top: -12px;
	left: -163px;
	opacity: 1;
}

#requirements_text dd {
	margin-left:170px;
}

#requirements_text h1 {
	position: relative;
	left: 0;
	top: 0;
	
}

#links-requirements_text {
	position: absolute; 
	top: 219px;
	left: 120px;
	color: #451805;
}

#links-requirements_text h3 {
	margin-top: 0;
}

div#links_text {
	background:url('../images/history/canvas.png') no-repeat;
	background-size: 100% 100%;
	padding: 25px;
	
	width: 340px;
	
	-webkit-transition:opacity 1s linear;
	-moz-transition:opacity 1s linear;
	-o-transition:opacity 1s linear;
	-ms-transition:opacity 1s linear;
	transition:opacity 1s linear;
}


div#links_text div.link
{
	padding:0;
	display: inline-block;
	
	-webkit-transition:opacity 1s linear;
	-moz-transition:opacity 1s linear;
	-o-transition:opacity 1s linear;
	-ms-transition:opacity 1s linear;
	transition:opacity 1s linear;

	width: 164px;
	height: 80px;
}

div#media_logos li#media_desktops_button h2 {
	background-repeat: no-repeat !important;
}

div#links_text div.link a {
	display: block;
	height: 50px;
	color: #451805;
	text-decoration: none;
}

div#links_text div.link a img {
	width: 164px;
	height: 50px;
	float: left;
	background: white;
	border: 1px solid #451805;
	margin-top: 10px;
	opacity: .7;
	-webkit-transition:opacity .2s linear;
	-moz-transition:opacity .2s linear;
	-o-transition:opacity .2s linear;
	-ms-transition:opacity .2s linear;
	transition:opacity .2s linear;
}

div#links_text div.link a:hover {
	color: black;
}

div#links_text div.link a:hover img {
	border: 1px solid #ad0000;
	opacity: 1;
}

div#links_text div.link a span {
	clear: both;
	display: block;
	text-align: center;
	padding: 7px 0;
}

div#requirements_text
{
	width: 340px;
	min-height: 400px;
	-webkit-transition:opacity 2s linear;
	-moz-transition:opacity 2s linear;
	-o-transition:opacity 2s linear;
	-ms-transition:opacity 2s linear;
	transition:opacity 2s linear;
	
	margin-top: 20px;
	background:url('../images/features/canvas.png') no-repeat;
	background-size: 100% 100%;
	padding: 25px;
}


div#requirements_text h2 {
	width: 316px;
}

div#requirements_text div#strong_provisional
{
	color: black;
}

div#requirements_text
{

}

div#requirements_text dl
{
	padding-top: 15px;
}

div#requirements_text dl lh div
{
	font-weight: bold;
	padding-bottom: 5px;
	
	color: #ad0000;
}

div#requirements_text dl dt 
{
	float: left;
	min-width: 170px;
}

div#requirements_text div#requirements_notices
{
	padding-top: 1px;
}


.links-requirements #legal {
	top: 1200px;
	left: 138px;
}

.en #links_link3, .en #links_link4{
    display:inline-block !important;
}

#links_link3, #links_link4{
    display:none !important;
}


/* -----------------------------------------------*/
/* ---------------------- END --------------------*/
/* -----------------------------------------------*/