/*Reset*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, input, select {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}

/*HTML5 elements*/
caption, article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, img {
    display: block;
}

/*Global*/
html{
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-smooth: always;
	overflow-y: scroll;
}


a,a:hover{text-decoration: none}
a:visited,a:active{color: inherit}
a:focus{outline: thin dotted}
a:hover,a:active{outline: 0;}

table{
	width: 100%;
	border-collapse:collapse;
	border-spacing:0;
}
td,th{vertical-align:middle}

ul{list-style: disc inside none}
ol{list-style: decimal inside none}
nav ul{list-style: none}

input, select,textarea {
	vertical-align:middle;
	font-family: inherit;
}
textarea{resize: vertical}

img {-ms-interpolation-mode: bicubic}
*[disabled] { cursor: default }

/*Clearing*/
.clearfix:after, .inner:after {
	content: " ";
	display: block;
	visibility: hidden;
	font-size: 0;
	height: 0;
	clear: both;
}
* html .clearfix, * html .inner {zoom: 1}
*:first-child+html .clearfix, *:first-child+html .inner {zoom: 1}

.clear {clear: both}

/*Magic classes*/

.fill:before, .fill:after{
    content: " ";
    position: absolute;
    width: 3000px;
    height: 100%;
    top: 0;
}
.fill:before{ left: -3000px}
.fill:after{right: -3000px}

.max {
	width: 100%;
	height: 100%;
	display: block;
}

.hidden {display: none}
.invisible{
	visibility: hidden;
	font-size: 0px;
	line-height: 0px;
}

.block{display: block !important}
.inline{display: inline !important}
.inline-block{display: inline-block !important}

.noborder {border: none !important}
.nobg {background: none !important}

.borderbox {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*Basic Colors & Project Colors*/

.red {color: #f00}
.green {color: #0f0}
.blue {color: #00f}
.black {color: #000}
.white {color: #fff}
.yellow {color: #fc0}

/*Positions*/

.left {float: left}
.right {float: right}
.center {
	margin-left: auto;
	margin-right: auto;
}

.absolute {position: absolute}
.relative {position: relative}
.fixed {
    position: absolute;
    position: fixed;
}

/*Basic grid*/
.half, .third, .quarter, .fifth{ float: left }
.half, .quarter.double { width: 50%}
.third { width: 33.33334%}
.third.double { width: 66.6%}
.quarter {width: 25%;}
.fifth { width: 20% }
.fifth.double {width: 40%}

/*Paddings*/
.pt5{padding-top: 5px}
.pb5{padding-bottom: 5px}
.pl5{padding-left: 5px}
.pr5{padding-right: 5px}
.pt10{padding-top: 10px}
.pb10{padding-bottom: 10px}
.pl10{padding-left: 10px}
.pr10{padding-right: 10px}
.pt15{padding-top: 15px}
.pb15{padding-bottom: 15px}
.pl15{padding-left: 15px}
.pr15{padding-right: 15px}
.pt20{padding-top: 20px}
.pb20{padding-bottom: 20px}
.pl20{padding-left: 20px}
.pr20{padding-right: 20px}
.pt25{padding-top: 25px}
.pb25{padding-bottom: 25px}
.pl25{padding-left: 25px}
.pr25{padding-right: 25px}
.pt50{padding-top: 50px}
.pb50{padding-bottom: 50px}
.pl50{padding-left: 50px}
.pr50{padding-right: 50px}

/*Margins*/
.mt5{margin-top: 5px}
.mb5{margin-bottom: 5px}
.ml5{margin-left: 5px}
.mr5{margin-right: 5px}
.mt10{margin-top: 10px}
.mb10{margin-bottom: 10px}
.ml10{margin-left: 10px}
.mr10{margin-right: 10px}
.mt15{margin-top: 15px}
.mb15{margin-bottom: 15px}
.ml15{margin-left: 15px}
.mr15{margin-right: 15px}
.mt20{margin-top: 20px}
.mb20{margin-bottom: 20px}
.ml20{margin-left: 20px}
.mr20{margin-right: 20px}
.mt25{margin-top: 25px}
.mb25{margin-bottom: 25px}
.ml25{margin-left: 25px}
.mr25{margin-right: 25px}
.mt50{margin-top: 50px}
.mb50{margin-bottom: 50px}
.ml50{margin-left: 50px}
.mr50{margin-right: 50px}

/*Fonts and Typography*/
.arial {font-family: 'Arial'}
.helvetica {font-family: 'Helvetica'}
.serif {font-family: serif}
.sans {font-family: sans-serif}

/*Sizes*/
.size38{font-size: 38px}
.size36{font-size: 36px}
.size34{font-size: 34px}
.size32{font-size: 32px}
.size30{font-size: 30px}
.size28{font-size: 28px}
.size26{font-size: 26px}
.size24{font-size: 24px}
.size22{font-size: 22px}
.size20{font-size: 20px}
.size18{font-size: 18px}
.size16{font-size: 16px}
.size14{font-size: 14px}

/*Align*/
.alignl{text-align: left !important}
.alignr{text-align: right !important}
.alignc{text-align: center !important}
.alignj{text-align: justify !important}
.alignt{vertical-align: top !important}
.alignm{vertical-align: middle !important}
.alignb{vertical-align: baseline !important}

/*Styles*/

.upper {text-transform: uppercase}
.lower {text-transform: lowercase}
.caps {text-transform: capitalize}


/*Selection Highlight*/

::selection, ::-webkit-selection, ::-moz-selection{
	background: rgba(0,116,0,0.5);
	color: #fff;
}

/*Project Specific - Layout & Global */

html {
	background: #fff;
}

body {
    min-width: 950px;
	overflow: hidden;
	background: #0C0C0C;
	color: #fff;
    font-family: 'Signika', sans-serif;
	font-size: 13px;
	font-weight: 200;
}

h1,h2,h3,h4,h5,h6 {
	color: #fff;
}

h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
	color: inherit;
}

a {
	color: #d11e1e;
}

h1{
	font-size: 28px;
}

h2{
	font-size: 26px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 12px;
}

p {
	line-height: 1.4;
	padding-bottom: 10px;
}

hr {
	width: 100%;
	height:1px;
	line-height: 1px;
	display: block;
	margin: 0 auto;
	padding: 0;
	clear: both;
	background: transparent;
	/*color: transparent;*/
	border: 0;
	border-bottom: 1px solid #7a725a;
}

.animate, .download-wrapper .message{
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}



/*Layout*/

.inner {
        margin: 0 auto;
        position: relative;
}

.navigation {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index:100;
    background: #f8f8f8;
}

.navigation .inner {
    width: 960px;
	height: 40px;
    margin: 0 auto;
}

.navigation ul {
    margin: 10px 0 0 0;
}

.navigation li {
    width: 130px;
    display: inline-block;zoom: 1; *display: inline;
    background: #fff;
    color: #d11e1e;
    font-size: 15px;
    font-weight: 200;
    text-align: center;
    text-transform: uppercase;
    padding: 5px 0;
    margin: 0 10px 0 0;
    cursor: pointer;
    border: 1px solid #eee;
    border-radius: 4px;
    position: relative;
}

.navigation a{
    display: block;
}

.navigation li:hover, .navigation a:hover{
    color: #555;
}

.navigation .submenu:hover {
    border-radius: 4px 4px 0px 0px;
    padding-bottom: 15px;
}

.submenu ul{
    width: 200px;
    position: absolute;
    display: none;
    background: #fff;
    margin: 0 0 0 0;
    top: 35px;
    left: -1px;
    padding: 5px 0 0 0;

    border: 1px solid #eee;
    border-top: none;
    box-shadow: 2px 2px 1px rgba(150,150,150,0.5);
    border-radius: 0 4px 4px 4px;
}

.navigation .submenu:hover ul {
    display: block;
}

.submenu li{
    width: auto;
    display: block;
    border: none;
}

.submenu a{
    color: #d11e1e;
    padding: 10px;
    text-transform: none;
}

.navigation .submenu li {
    background:  url('../images/menu-item-bottom-line.png') 50% 100% no-repeat;
}

.navigation .submenu li:last-child {
    background:none;
}

.navigation .showform {
    display: block;
    float: right;
    color: #d11e1e;
    border: none;
    background: none;
    padding: 6px 0 0 0;
    position: relative;
}

.contactform {
    position: fixed;
    width: 300px;
    top: 100px;
    left: 50%;
    margin: 0 0 0 -150px;
    background: #fff;
    color: #000;
    padding: 20px;
    border: 1px solid #eee;
    box-shadow: 1px 1px 2px #999;
    display: none;
    outline: 2000px solid rgba(0,0,0,0.5);
    z-index: 999;
}

.contactform .close{
    position: absolute;
    width: 20px;
    height: 20px;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.contactform .close:before{
    content: "\00D7";
    font-size: 20px;
}

.contactform .close:hover:before{
    color: #f00;
}

.contactform strong{
    padding: 0 0 10px 0;
    display: block;
}

.contactform input, .contactform textarea{
    width: 300px;
    padding: 8px 5px;
    margin: 0 0 5px 0;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 2px;
}

.contactform textarea{
    min-height: 100px;
}

input:hover, textarea:hover,input:focus,textarea:focus{
    border: 1px solid #d11e1e;
}

.contactform button{
    display: block;
    padding: 8px 5px;
    border: 1px solid #d11e1e;
    background: #d11e1e;
    color: #fff;
    text-transform: uppercase;
    float: right;
    cursor: pointer;
}

.contactform .response{
    background: #d11e1e;
    color: #fff;
    text-transform: none;
    font-size: 20px;
    text-align: center;
    padding: 20px;
    margin: 0 0 10px 0;
    display: none;
}

.contactform button:hover{
    background: #fff;
    color: #d11e1e;
}

::-webkit-input-placeholder { color:#999; }
::-moz-placeholder { color:#999; }
:-ms-input-placeholder { color:#999; }
input:-moz-placeholder { color:#999; }









.header {
    width: 100%;
	height: 200px;
    margin: 50px auto 0 auto;
    position: relative;
    z-index: 5;
    background: url('../images/header.jpg') 0 0 repeat-x;
}

.logo {
  width: 960px;
  margin: 0 auto;
  text-align: center;
}

.logo img {
    display: inline-block;zoom: 1; *display: inline;
}

.game{
    position: relative;
    overflow: hidden;
}

.game .inner {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
}

.game header {
    text-align: center;
    position: relative;
    top: 23px;
    z-index: 20;
}

.game h2 {
    width: 452px;
    height: 106px;
    padding: 40px 0 0 0;
    font-size: 32px;
    font-weight: 200;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #fff;
    background: url('../images/headline.png') 0 0 no-repeat;
    color: #000;
    display: inline-block;zoom: 1; *display: inline;
}


#lc{
    background: url('../images/lost-civilization-bck.jpg') 50% 0 no-repeat;
    height: 1146px;
}

.arrow{
    width: 58px;
    height: 22px;
    background: url('../images/header-arrow-down.png') 50% 0 no-repeat;
    position: relative;
    left: 468px;
}

.animation-woman {
    width: 1px;
    height: 1px;
    margin: 0 auto;
    position: absolute;
    top: 528px;
    z-index: 3;
}

.animation-woman img{
    width: 514px;
    height: 618px;
    position: relative;
    left: 720px;
}

.animation-plane {
    position: absolute;
    left: -240px;
    top: 235px;
    z-index:3;
}

.animation-plane2 {
    position: absolute;
    left: 140px;
    top: 129px;
    z-index:21;
    -webkit-transform: rotate(20deg);
}

.scrollDown{
    width: 200px;
    position: absolute;
    left: 50%;
    top: 450px;
    margin: 0 0 0 -100px;
    z-index: 21;
    cursor: pointer;
}

.scrollDown:before{
    content: " ";
    width: 50px;
    height: 50px;
    position: absolute;
    left: 75px;
    top: -50px;
    background: url('../images/arrows.png') -100px 0 no-repeat;
}

.scrollDown:hover:before{
    background-position: -100px -50px;
}

.scrollDown span{
    display: block;
    background: #000;
    color: #d11e1e;
    margin: 5px 0 0 0;
    padding: 10px 10px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 400;
    border-radius: 4px;
}

.plane-path {
    width: 100%;
    height: 426px;
    background: url('../images/lost-civilization-plane-path.png') 0 0 no-repeat;
    position: absolute;
    top: 270px;
    z-index:2;
}

.description {
    width: 780px;
    margin: auto;
    position: relative;
    padding: 15px 100px;
    padding-top: 10px;
    text-align: center;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6);
    left: -10px;
}

.download-wrapper {
    padding: 20px 0 0 0;
    position: absolute;
    bottom: 130px;
    z-index: 5;

}

#tt .download-wrapper {
    bottom: 100px;
}

.download-wrapper li {
    display: inline-block;
    position: relative;
}

.download-wrapper a {
    width: 214px;
    height: 62px;
    background: url('../images/download-button-bck.png') 0 0 no-repeat;
    display: block;
    padding: 25px 0 0 25px;
    margin-right: 5px;
    color: #fff;
    font-size: 11px;
}

.download-wrapper a:hover {
    background: url('../images/download-button-bck.png') 0 -88px no-repeat;
}

.download-wrapper a span{
    font-size: 20px;
    display: block;
}

.download-wrapper .message{
    display: table-cell;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
/*    padding: 12px 20px;
    padding-top: 74px;*/
    height: 0px;
    border: 1px solid #222;
    background: rgba(0,0,0,0.8);
    max-width: 198px;
    min-width: 90px;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    opacity: 0;
    cursor: pointer;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 60px;
    text-align: center;
    padding: 0 40px 0 0;
}

.desktop .download-wrapper .message{
    //outline: 2000px solid rgba(0,0,0,0.5);
}

.download-wrapper li:hover .message{
    opacity: 1;
    padding-top: 12px;
    height: 62px;
}

.slide-show-wrapper {
    width: 990px;
    height: 630px;
    cursor: pointer;
    position: relative;
}



#tt{
    background: url('../images/secret-garden-bck.jpg') 50% 0 no-repeat;
    height: 1082px;
    padding-top: 85px;
}

#tt .download-wrapper {
  bottom: 90px;
  left: 380px;
}

.animation-arrow {
    width: 332px;
    height: 149px;
    position: absolute;
    top: 140px;
    left : -380px;
    z-index: 10;
    background: url('../images/secret-garden-animation-arrow.png') 0 0 no-repeat;
}

.animation-wasp {
    width: 251px;
    height: 271px;
    position: absolute;
    top: 230px;
    left : 880px;
    z-index: 10;
}

#si{
    background: url('../images/sharpe-investigations-bck.jpg') 50% 0 no-repeat;
    height: 1082px;
    padding-top: 85px;
}

.si-man {
    width: 1px;
    height: 1px;
    margin: 0 auto;
    position: absolute;
    top: 178px;
    left: -320px;
    z-index: 3;
}
.si-woman {
    width: 1px;
    height: 1px;
    margin: 0 auto;
    position: absolute;
    top: 220px;
    left: 800px;
    z-index: 3;
}
#si .si-animation-photo {
    height: 144px;
    position: absolute;
    top: 0px;
    left: 50px;
    opacity: 1;
    z-index: 10;
}
#si .si-animation-ring {
    height: 100px;
    position: absolute;
    top: -430px;
    left: 1000px;
    opacity: 1;
    z-index: 10;
}
#si .si-animation-map {
    height: 144px;
    position: absolute;
    top: 430px;
    left: 180px;
    opacity: 1;
    z-index: 10;
}
#si .download-wrapper {
  bottom: 90px;
  left: 380px;
}
#si .description {
    width: 640px;
    padding: 5px 40px 10px 40px;
}
#si .slide-show-wrapper {
    height: 580px;
}
#si .navigation {
  top: 500px;
}

#rem{
    background: url('../images/runaway-express-mystery-bck.jpg') 50% 0 no-repeat;
    height: 1082px;
    padding-top: 85px;
}
#rem .description {
    width: 920px;
    padding: 5px 30px 10px 30px;
}
#rem .slide-show-wrapper {
    z-index: 10;
    background-color: #000;
    height: 540px;
}
#rem .navigation {
  top: 465px;
}
#rem .download-wrapper {
  bottom: 110px;
  left: 380px;
}
#rem .title {
  font-size: 28px;
  padding-top: 45px;
  height: 101px;
}
#rem .rem-animation-train {
    width: 100px;
    position: absolute;
    top: 260px;
    left: -160px;
}

.company  {
    background: #fff;
    color: #000;
}

.company .inner {
    width: 960px;
    height: 300px;
    background: url('../images/company-contact-bck.png') -38px 0 no-repeat;
    margin: 0 auto;
    padding: 100px 0;
}

.company ul {
    list-style-image: url('../images/company-contact-bullet.png');
    line-height: 1.5;
}

.company h3 {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 200;
    padding: 0 0 20px 0;
    color: #212121;
}

.info {
    width: 650px;
    float: left;
    padding: 0 60px 0 0 ;
}

.contact {
    width: 200px;
    float: left;
}

.contact p {
    padding: 0 0 20px 0;
    line-height: 20px;
}

.contact a, footer a {
    color: red;
}

.footer {
    background: #f2f2f2;
    clear: both;
}

.footer .inner {
    width: 960px;
    height: 100px;
    background:  url('../images/footer-logo.png') 50% 90px no-repeat;
    margin: 0 auto;
    padding: 40px 0;
    text-align: center;
}

.footer p {
    color: #222;
}

.slider {
	width: 978px;
	height: 735px;
	position: relative;
	margin: 0;
    z-index: 1;
}

.slider .image-slide {
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #0c0c0c;
}

.slider img{
    border: none;
}

.slider .slidesjs-pagination {
	position: absolute;
	right: 15px;
	bottom: 0px;
	z-index: 10;
}

.slider li {
	float: left;
	margin: 0 10px 0 0;
}

.slider li a {
	width: 17px;
	height: 17px;
	display: block;
	background: url('../images/banner-switcher-button.png') 0 0 no-repeat;

	text-align: center;
	color: #002230;
	font-size: 12px;
	text-decoration: none;
	padding: 0px 0 0 0;
}

.slider li .active, .slider li a:hover {
	background: url('../images/banner-switcher-active-button.png') 0 0 no-repeat;
	color: #fff;
}

.slider .navigation {
    width: 265px;
    height: 59px;
    background: transparent url('../images/slider-navigation.png') 50% 50% no-repeat;
    position: absolute;
    left: 370px;
    top: 560px;
    z-index: 11;
}

.slider .slidesjs-navigation {
    width: 50px;
    height: 50px;
    display: block;
    position: relative;
    background: url('../images/arrows.png') 0 0 no-repeat;
}

.slider .slidesjs-previous {
    float: left;
    left: 9px;
    top: 7px;
}

.slider .slidesjs-previous:hover {
    background-position: 0px -50px;
}

.slider .slidesjs-next {
    float: right;
    right: 8px;
    top: 7px;
    background-position: -50px 0;
}

.slider .slidesjs-next:hover {
    background-position: -50px -50px;
}


a.trailer {
  width: 131px;
  height: 30px;
  background: transparent url(../images/watch-trailer.png) no-repeat left top;
  position: absolute;
  top: 10px;
  left: 432px;
  z-index: 100;
  display: block;
  padding: 52px 0 0 0;
  font-size: 19px;
  text-align: center;
}
a.trailer:hover {
  background-position: -137px top
}
div.youtube-wrapper {
  display: none;
  z-index: 99;
}