@charset "utf-8";
/* CSS Document */
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #000;
}

h1, p {
	display:inline-block;
	font-family: 'Titillium Web', sans-serif;
	font-size:24px;
	margin-top: 0;
}

h2 {
	display:inline-block;
	color:#FFFFFF;
	font-family: 'Titillium Web', sans-serif;;
	font-size:24px;
	margin-top: 0;
	padding-right: 40px;
	padding-left: 40px;
}

@media only screen and (max-width: 550px) {
	h2 {
	display:none;
}
}

a img {
	border: none;
}

a:link {
	color: #FFFFFF;
	opacity: 1;
	text-decoration: none;
}

a:visited {
	color: #FFFFFF;
	opacity: 1;
	text-decoration: none;
}

a:hover {
	color: #FFFFFF;
	opacity: 0.75;
	text-decoration: none;
}

a:active, a:focus {
	color: #FFFFFF;
	opacity: 1;
	text-decoration: none;
}

img { 
	display:block;
}

.content {
	width: 100%;
	min-width:320px;
	background-color: #141414;
	margin: 0 auto;
}

.header {
	background-image:url('../img/BG_Header.jpg');
	background-size:cover;
	background-repeat: no-repeat;
	background-color: #000000;
	background-position:bottom;
	text-align:center;
}

.header .inner{
	width: 100%;
	max-width:735px;
	display: inline-block;
	position: relative;
}

.header .inner:after{
	padding-top: 75%;
	display: block;
	content: '';
}

.header .inner .container{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

.header img.logo {
    position: absolute;
	width:100%;
	height:auto;
	top:10%;
	margin: 0 auto;
	left:0px;
	right:0px;
	z-index: 8;
}

.header img.sub {
    position: absolute;
	width:75%;
	height:auto;
	bottom:38%;
	margin: 0 auto;
	left:0px;
	right:0px;
	z-index: 6;
}

.header .downloads {
    position: absolute;
	bottom:30%;
	margin: 0 auto;
	left:0px;
	right:0px;
	z-index: 10;
}

.header .download{
	display:inline-block;
}

.header .spacer{
	display:inline-block;
	width:2%; /* older browsers */
	width:calc(7% - 25px);
}

.header a:hover{
	opacity:0.9;
}

@media only screen and (max-width: 767px) {
.header .fourthbutton {
	display:none;
}
}

@media only screen and (max-width: 550px) {
.header .thirdbutton {
	display:none;
}
}

.media{
	background-image:url('../img/BG_Green.jpg');
	background-repeat: repeat;
}

.trailer {
	display:block;
	max-width:735px;
	padding-top: 70px;
	margin: 0 auto;
}

@media only screen and (max-width: 767px) {
.trailer {
	max-width:90%;
	max-height:100%;
	padding-top: 5%;
}
}

.trailer .container {
    position: relative;
    padding-bottom: 56.2%;
    height: 0;
    overflow: hidden;
}

.trailer .container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.screens {
	padding-top: 30px;
	padding-bottom: 70px;
	height:100%;
	text-align:center;
}

.screens img {
	display:inline-block;
}

.screens img.padscreen {
	padding-right: 30px;
	padding-left: 30px;
}

.screens a:hover{
	opacity:0.9;
}

@media only screen and (max-width: 767px) {
.screens {
	padding-top: 5%;
	padding-bottom: 5%;
}

.screens img {
	width:90%;
	height:auto;
}

.screens img.padscreen {
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 5%;
	padding-bottom: 5%;
}
}

.footer {
	padding-top: 70px;
	height:450px;
	margin: 0 auto;
	background-image:url('../img/BG_Gray.jpg');
	background-repeat: repeat;
	text-align:center;
}

.footer .menu {
	text-align:center;
}

@media only screen and (max-width: 550px) {
.footer .menu {
	width:110px;
	display:inline-block;
	margin-right:0px;
}

.footer .menu h1{
	padding-bottom:20px;
}
}

.footer .logo {
	padding-top: 75px;
	text-align:center;
}

.footer .logo img:hover {
	opacity:0.8;
}

@media only screen and (max-width: 550px) {
.footer .logo {
	padding-top: 25px;
}
}

.hiddenText {
	height:0px;
	text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}