@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
	color: #000;
	text-align: center;
	vertical-align: middle;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

body
{
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  
  transition: color 0.3s ease;
}

a:hover
{
	color: #FFF;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		23;
	dw-num-cols-tablet:		23;
	dw-num-cols-desktop:	23;
	dw-gutter-percentage:	5;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 99.7929%;
	padding-left: 0.1035%;
	padding-right: 0.1035%;
}

#Logo_JSP-GO {
	clear: both;
	float: left;
	margin-left: 28%;
	margin-top: 3%;
	margin-bottom: 2%;
	width: 44%;
	display: block;
}
#Logo_LangSelect {
	clear: both;
	float: left;
	margin-left: 17%;
	margin-top: 10%;
	margin-bottom: 3%;
	width: 66%;
	display: block;
}
#HeaderBar {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	height: 50px;
	display: block;
	position: fixed;
	background-color: #253746;
	-moz-box-shadow: -1px 1px 1px 1px #000;
	-webkit-box-shadow: -1px 1px 1px 1px #000;
	box-shadow: -1px 1px 1px 1px #000;
}
#HeaderFlag {
	clear: both;
	float: left;
	margin-top: 12px;
	width: 98%;
	vertical-align: center;
	position: fixed;	
	display: block;
}
#HeaderLogo {
	clear: both;
	float: left;
	text-align: center;
	margin-top: 10px;
	width: 40%;
	margin-left: 30%;
	position: fixed;	
	display: block;
}
#WebMenuBack {
	position: fixed;
	clear: both;
	float: left;
	width: 27px;
	display: block;
	margin-left: 10px;
	margin-top: 10px;
}
.Titles {
	clear: both;
	float: left;
	display: block;
	text-align: center;	
	margin-left: 10%;
	margin-top: 2%;
	width: 80%;
	font-size: 16px;
}
.TerritoryGrid_x1 {
	clear: both;
	float: left;
	margin-left: 30%;
	margin-top: 2%;
	margin-bottom: 10%;
	width: 40%;
	display: grid;
	grid-template-columns: 100%;
	column-gap: 3%;
	grid-row-gap: 4%;
}
.TerritoryGrid_x2 {
	clear: both;
	float: left;
	margin-left: 10%;
	margin-top: 5%;
	margin-bottom: 5%;
	width: 80%;
	display: grid;
	grid-template-columns: 49.5% 49.5%;
	column-gap: 1%;
	grid-row-gap: 1%;
}
.TerritoryGrid_x3 {
	clear: both;
	float: left;
	margin-left: 30%;
	margin-top: 2%;
	margin-bottom: 10%;
	width: 40%;
	display: grid;
	grid-template-columns: 100%;
	column-gap: 3%;
	grid-row-gap: 4%;
}
.LanguageGrid-Europe12 {
	clear: both;
	float: left;
	margin-left: 10%;
	margin-top: 2%;
	margin-bottom: 10%;
	width: 80%;
	height:100%;
	display: grid;
	grid-template-columns: 31% 31% 31%;
	column-gap: 3%;
	grid-row-gap: 4%;
}
.LanguageGrid-Europe {
	clear: both;
	float: left;
	margin-left: 10%;
	margin-top: 2%;
	margin-bottom: 10%;
	width: 80%;
	height:100%;
	display: grid;
	grid-template-columns: 31% 31% 31%;
	column-gap: 3%;
	grid-row-gap: 1.5%;
}
.LanguageGrid-USA {
	clear: both;
	float: left;
	margin-left: 10%;
	margin-top: 2%;
	margin-bottom: 10%;
	width: 80%;
	height:100%;
	display: grid;
	grid-template-columns: 32% 32% 32%;
	column-gap: 3%;
	grid-row-gap: 2%;
}	
.Spacer {
	clear: both;
	float: left;
	margin-top: 60px;
	width: 100%;
	display: block;
}
.SmallerSpacer {
	clear: both;
	float: left;
	margin-top: 5%;
	width: 100%;
	display: block;
}
.LanguageButton {
	clear: both;
	float: left;
	width: 100%;
	background-color: #253746;
	padding-bottom: 3%;
	font-family:"Arial Narrow", sans-serif;
	font-size:14px;
	font-style:normal;
	font-weight:bold;
	color: white;
	line-height: 100%;
	border: none;
	outline-color: #253746;
}
.DownloadButton {
	clear: both;
	float: left;
	display: block;
	background-color: #e30613;
	margin-top: 5%;
	margin-bottom: 5%;
	margin-left: 35.5%;
	width: 25%;
	padding-top: 2%;
	padding-bottom: 2%;
	padding-left: 2%;
	padding-right: 2%;
	border-radius: 10px;
	text-align: center;
	color: white;
}
.close {
	color: #FF0000;;
	float: right;
	margin-right: 3%;
	font-size: 50px;
	font-family: "Arial Black", "sans-serif";
	font-weight: bolder;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


@media only screen and (min-width: 800px) {
.gridContainer {
	width: 100%;
	padding-left: 0.0983%;
	padding-right: 0.0983%;
}
	

#Logo_JSP-GO {
	clear: both;
	float: left;
	margin-left: 35%;
	margin-top: 3%;
	margin-bottom: 3%;
	width: 30%;
	display: block;
}
#Logo_LangSelect {
	clear: both;
	float: left;
	margin-left: 34.8547%;
	margin-top: 5%;
	margin-bottom: 2%;
	width: 30.2904%;
	display: block;
}
#HeaderBar {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	height: 50px;
	display: block;
	position: fixed;
	background-color: #253746;
	-moz-box-shadow: -1px 1px 1px 1px #000;
	-webkit-box-shadow: -1px 1px 1px 1px #000;
	box-shadow: -1px 1px 1px 1px #000;
}
#HeaderFlag {
	clear: both;
	float: left;
	margin-top: 12px;
	width: 98%;
	position: fixed;	
	display: block;
}
#HeaderLogo {
	clear: both;
	float: left;
	text-align: center;
	margin-top: 10px;
	width: 40%;
	margin-left: 30%;
	position: fixed;	
	display: block;
}
#WebMenuBack {
	position: fixed;
	clear: both;
	float: left;
	width: 27px;
	display: block;
	margin-left: 10px;
	margin-top: 10px;
}
.Titles {
	clear: both;
	float: left;
	display: block;
	text-align: center;
	margin-left: 20%;
	margin-top: 2%;
	width: 60%;
	font-size: 16px;
}
.TerritoryGrid_x1 {
	clear: both;
	float: left;
	margin-left: 40%;
	margin-top: 2%;
	margin-bottom: 10%;
	width: 20%;
	display: grid;
	grid-template-columns: 100%;
	column-gap: 3%;
	grid-row-gap: 4%;
}
.TerritoryGrid_x2 {
	clear: both;
	float: left;
	margin-left: 20%;
	margin-top: 2%;
	margin-bottom: 10%;
	width: 60%;
	display: grid;
	grid-template-columns: 48% 48%;
	column-gap: 3%;
	grid-row-gap: 1%;
}
.TerritoryGrid_x3 {
	clear: both;
	float: left;
	margin-left: 20%;
	margin-top: 2%;
	margin-bottom: 5%;
	width: 60%;
	display: grid;
	grid-template-columns: 32% 32% 32%;
	column-gap: 3%;
	grid-row-gap: 3%;
}
.LanguageGrid-Europe12 {
	clear: both;
	float: left;
	margin-left: 10%;
	margin-top: 2%;
	margin-bottom: 5%;
	width: 80%;
	height: 100%;
	display: grid;
	grid-template-columns: 18% 18% 18% 18% 18%;
	column-gap: 2%;
	grid-row-gap: 5%;
}
.LanguageGrid-Europe {
	clear: both;
	float: left;
	margin-left: 10%;
	margin-top: 2%;
	margin-bottom: 5%;
	width: 80%;
	height: 100%;
	display: grid;
	grid-template-columns: 18% 18% 18% 18% 18%;
	column-gap: 2%;
	grid-row-gap: 3%;
}
.LanguageGrid-USA {
	clear: both;
	float: left;
	margin-left: 20%;
	margin-top: 2%;
	margin-bottom: 5%;
	width: 60%;
	height: 100%;
	display: grid;
	grid-template-columns: 32% 32% 32%;
	column-gap: 3%;
	grid-row-gap: 3%;
}
.Spacer {
	clear: both;
	float: left;
	margin-top: 80px;
	width: 100%;
	display: block;
}
.SmallerSpacer {
	clear: both;
	float: left;
	margin-top: 5%;
	width: 100%;
	display: block;
}
.LanguageButton {
	clear: both;
	float: left;
	background-color: #253746;
	width: 100%;
	font-family:"Arial Narrow", sans-serif;
	font-size:16px;
	font-style:normal;
	font-weight:bold;
	color: white;
	line-height: 100%;
	border: none;
	outline-color: #253746;
}
.DownloadButton {
	clear: both;
	float: left;
	display: block;
	background-color: #e30613;
	margin-top: 5%;
	margin-bottom: 5%;
	margin-left: 40%;
	width: 20%;
	padding-top: 1%;
	padding-bottom: 1%;
	padding-left: 1%;
	padding-right: 1%;
	border-radius: 10px;
	text-align: center;
	color: white;
}

.close {
  color: #FF0000;
  float: right;
  margin-right: 5%;
  font-size: 28px;
  font-family: "Arial Black", "sans-serif";
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
}

/* Desktop Layout: 769px to a max of 1920px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1100px) {
.gridContainer {
	width: 100%;
	max-width: 1920px;
	padding-left: 0.1014%;
	padding-right: 0.1014%;
	margin: auto;
}

#MenuHolder
{
	position: fixed;
	clear: both;
	float: left;
	margin-left: -0.5%;
	margin-top: 10px;
	width: 100%;
	display: block;
	background: rgb(37,55,70);
	background: rgba(37,55,70,0.9);
  
  -webkit-font-smoothing: antialiased;

  transform-origin: 0%, 0%;
  transform: translate(-100%, 0);

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#Logo_JSP-GO {
	clear: both;
	float: left;
	margin-left: 34.8547%;
	margin-top: 3%;
	margin-bottom: 3%;
	width: 30.2904%;
	display: block;
}
#Logo_LangSelect {
	clear: both;
	float: left;
	margin-left: 40%;
	margin-top: 2%;
	margin-bottom: 0%;
	width: 20%;
	display: block;
}
#HeaderBar {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	height: 50px;
	display: block;
	position: fixed;
	background-color: #253746;
	-moz-box-shadow: -1px 1px 1px 1px #000;
	-webkit-box-shadow: -1px 1px 1px 1px #000;
	box-shadow: -1px 1px 1px 1px #000;
}
#HeaderFlag {
	clear: both;
	float: left;
	margin-top: 12px;
	width: 99%;
	position: fixed;	
	display: block;
}
#HeaderLogo {
	clear: both;
	float: left;
	text-align: center;
	margin-top: 10px;
	width: 40%;
	margin-left: 30%;
	position: fixed;	
	display: block;
}
#WebMenuBack {
	position: fixed;
	clear: both;
	float: left;
	width: 27px;
	display: block;
	margin-left: 10px;
	margin-top: 10px;
}
.Titles {
	clear: both;
	float: left;
	display: block;
	text-align: center;
	margin-left: 20%;
	margin-top: 2%;
	width: 60%;
	font-size: 16px;
}
.TerritoryGrid_x1 {
	clear: both;
	float: left;
	margin-left: 40%;
	margin-top: 2%;
	margin-bottom: 10%;
	width: 20%;
	display: grid;
	grid-template-columns: 100%;
	column-gap: 3%;
	grid-row-gap: 4%;
}
.TerritoryGrid_x2 {
	clear: both;
	float: left;
	margin-left: 35%;
	margin-top: 2%;
	margin-bottom: 10%;
	width: 30%;
	display: grid;
	grid-template-columns: 47% 47%;
	column-gap: 3%;
	grid-row-gap: 1%;
}
.TerritoryGrid_x3 {
	clear: both;
	float: left;
	margin-left: 30%;
	margin-top: 0%;
	margin-bottom: 2%;
	width: 40%;
	display: grid;
	grid-template-columns: 32% 32% 32%;
	column-gap: 3%;
	grid-row-gap: 10%;
}
.LanguageGrid-Europe {
	clear: both;
	float: left;
	margin-left: 20%;
	margin-top: 0%;
	margin-bottom: 2%;
	width: 60%;
	height: 100%;
	display: grid;
	grid-template-columns: 15.4% 15.4% 15.4% 15.4% 15.4% 15.4%;
	column-gap: 1.5%;
	grid-row-gap: 5%;
}
.LanguageGrid-Europe {
	clear: both;
	float: left;
	margin-left: 20%;
	margin-top: 0%;
	margin-bottom: 2%;
	width: 60%;
	height: 100%;
	display: grid;
	grid-template-columns: 15.4% 15.4% 15.4% 15.4% 15.4% 15.4%;
	column-gap: 1.5%;
	grid-row-gap: 3%;
}
.LanguageGrid-USA {
	clear: both;
	float: left;
	margin-left: 30%;
	margin-top: 10%;
	margin-bottom: 2%;
	width: 40%;
	height: 100%;
	display: grid;
	grid-template-columns: 32% 32% 32%;
	column-gap: 3%;
	grid-row-gap: 5%;
}
.Spacer {
	clear: both;
	float: left;
	margin-top: 100px;
	width: 100%;
	display: block;
}
.SmallerSpacer {
	clear: both;
	float: left;
	margin-top: 5%;
	width: 100%;
	display: block;
}
.LanguageButton {
	clear: both;
	float: left;
	background-color: #253746;
	width: 100%;
	font-family:"Arial Narrow", sans-serif;
	font-size: 20px;
	font-style:normal;
	font-weight:bold;
	color: white;
	line-height: 100%;
	border: none;
	outline-color: #253746;
	cursor: pointer; 
	-webkit-appearance: none; 
	-moz-appearance: none; 
	appearance: none;
}
.DownloadButton {
	clear: both;
	float: left;
	display: block;
	background-color: #e30613;
	margin-top: 5%;
	margin-bottom: 3%;
	margin-left: 44%;
	width: 10%;
	padding-top: 0.5%;
	padding-bottom: 0.5%;
	padding-left: 1%;
	padding-right: 1%;
	border-radius: 10px;
	text-align: center;
	color: white;
}
.close {
  color: #FF0000;
  float: right;
  margin-right: 10%;	
  font-size: 50px;
  font-family: "Arial Black", "sans-serif";
}

.close:hover,
.close:focus {
  color: #FF0000;
  text-decoration: none;
  cursor: pointer;
}
}