/*
3.0 Navigation

3.1 Header
3.2 Desktop Navigation
	3.2.1  Nav Menus
	3.2.2  Nav CTAs
3.3 Secondary Navigation
3.4 Mobile Navigation
3.5 Tabs
3.6 Buttons
	3.6.1 Centered Buttons
	3.6.2  White Buttons
	3.6.3  Blue Buttons
3.7 Footer

*/



/* 3.1 Header */

div#header {
	height: 120px;
	width: 100%;
	background: rgba(255,255,255,1.0);
	box-shadow: 0px 0px 50px rgba(0,0,0,0.07);
	z-index: 100;
	transition-property: all;
	transition-duration: .3s;
	transition-timing-function: ease;
	}

div#logo {
	margin: 47px 20px 0px 1.5%;
	width: 270px;
	height: 47px;
	position: relative;
	float: left;
	}

div#logo a {
	display: block;
	width: 270px;
	height: 47px;
	float: left;
	}

div#logo a img {
	display: block;
	width: 270px;
	height: 47px;
	}



/* 3.2 Desktop Navigation */

@media all and (min-width: 891px) {
div.nav-mobile,
button#close-menu,
button#open-menu,
div#nav-mobile-sidebar {
	display: none;
	}

div#nav-primary {
	position: absolute;
	top: 38px;
	right: 50px;
	}

div.nav-container {
	margin: 0px 3px 0px 3px;
	border-radius: 5px 5px 5px 5px;
	box-shadow: none;
	position: relative;
	float: right;
	}

div.nav-container:hover {
	box-shadow: 0px 2px 20px rgba(0,0,0,0.15);
	}

div.nav-container a.primary {
	margin: 0px 0px 0px 0px;
	width: 70px;
	height: 77px;
	border-radius: 5px 5px 0px 0px;
	font-family: "Freight Sans Medium";
	font-size: 11px;
	line-height: 12px;
	color: #000;
	text-align: center;
	background-size: 0px 0px;
	display: block;
	z-index: 600;
	position: relative;
	transition-property: display;
	transition-duration: .2s;
	transition-timing-function: ease;
	}

div.nav-container:hover a.primary {
	height: 85px;
	color: #000;
	background: #fff;
	transition-property: display;
	transition-duration: .2s;
	transition-timing-function: ease;
	}

div.nav-container#nav-fact-sheet:hover a.primary,
div.nav-container#nav-news:hover a.primary {
	height: 75px;
	border-radius: 5px 5px 5px 5px;
	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: ease;
	}

div.nav-container a.primary span.icon {
	margin: 0px auto 5px auto;
	height: 42px;
	width: 70px;
	background-size: 50px 50px;
	background-repeat: no-repeat;
	background-position: bottom center;
	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: ease;
	}

div.nav-container a.primary.selected {
	border-radius: 5px 5px 5px 5px;
	background-color: #eee;
	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: ease;
	}


div.nav-container:hover a.primary.selected {
	border: none;
	border-radius: 5px 5px 0px 0px;
	background: #fff;
	transition-property: display;
	transition-duration: .2s;
	transition-timing-function: ease;
	}



/* 3.2.1 Nav Menus */

div.nav-menu {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 240x;
	border-radius: 0px 5px 5px 5px;
	text-decoration: none;
	background: none;
	box-shadow: none;
	position: absolute;
	top: 84px;
	left: 0px;
	visibility: hidden;
	z-index: 100;
	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: ease;
	}

div.nav-container:hover div.nav-menu {
	margin: 0px 0px 0px 0px;
	background: #fff;
	box-shadow: 0px 2px 20px rgba(0,0,0,0.15);
	visibility: visible;
	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: ease;
	}

div.nav-menu div.column {
	margin: 15px 0px 15px 0px;
	width: 240px;
	float: left;
	visibility: hidden;
	}

div.nav-container:hover div.nav-menu div.column {
	visibility: visible;
	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: ease;
	}

div.nav-menu a.secondary {
	margin: 0px 0px 0px 0px;
	padding: 9px 20px 9px 20px;
	font-family: "Freight Sans Medium";
	font-weight: normal;
	font-size: 16px;
	line-height: 18px;
	color: #222;
	text-decoration: none;
	display: block;
	transition-property: background;
	transition-duration: .2s;
	transition-timing-function: ease;
	}

div.nav-menu a.secondary:hover {
	background: linear-gradient(rgba(60,148,192,0.9), rgba(84,123,157,0.9));
	color: #fff;
	text-decoration: none;
	transition-property: background;
	transition-duration: .2s;
	transition-timing-function: ease;
	}
	}



/* 3.4 Mobile Navigation  */

@media all and (max-width: 890px) {
div#nav-primary,
div.nav-container a.primary,
div.nav-menu,
div#subheader,
div#nav-secondary {
	display: none;
	}

div#header {
	height: 90px;
	}

div#logo {
	margin: 22px 0px 0px 1%;
	}

div.mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    width: 100%;
    height: 100%;
	}

button#open-menu {
	width: 50px;
	height: 50px;
    border: none;
	background: url('/images/icon-menu-open.png') no-repeat 50% 50%;
	background-size: 32px 32px;
	position: absolute;
	top: 20px;
	right: 50px;
	display: block;
	cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
	}

@media all and (max-width: 650px) {
button#open-menu {
	right: 15px;
	}
	}

div#nav-mobile {
	height: 100%;
	width: 400px;
	background: linear-gradient(to right, #fff, #f6f6f6);
	box-shadow: 0px 0px 50px rgba(0,0,0,0.4);
	position: fixed;
	top: 0px;
    right: -440px;
	z-index: 400;
	overflow: auto;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
	}

body.pmr-open div#nav-mobile {
    right: 0
	}

body.pmr-open #page {
    left: -350px
	}

div#nav-mobile button#close-menu {
	width: 50px;
	height: 50px;
	background: url('/images/icon-menu-close.png') no-repeat 50% 50%;
	background-size: 32px 32px;
	display: block;
	z-index: 101;
	position: absolute;
	top: 20px;
	right: 15px;
	cursor: pointer;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
	}


div#nav-mobile-sidebar {
	padding-top: 90px;
	position: relative;
	top: 0px;
	}

div#nav-mobile a.primary {
	margin: 0px 0px 0px 0px;
	padding: 15px 0px 15px 15px;
	border-top: 1px dashed #ccc;
	height: 24px;
	font-family: "Freight Sans Medium";
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 20px;
	line-height: 24px;
	color: #000;
	display: block;
	}

div#nav-mobile a.primary.selected,
div.nav-mobile-menu.selected {
	background: linear-gradient(to right, #f6f6f6, #eee);
	}

div#nav-mobile a.primary:last-child {
	border-bottom: 1px dashed #ccc;
	}

div#nav-mobile a.primary span.icon {
	margin: -14px 15px 0px 0px;
	padding: 0px 0px 0px 0px;
	height: 40px;
	width: 40px;
	background-size: 40px 40px;
	background-position: center center;
	float: left;
	}

div.nav-mobile-menu {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 20px 0px;
	display: none;
	}

div#nav-mobile a.secondary {
	margin: 0px 0px 0px 0px;
	padding: 10px 20px 10px 70px;
	font-family: "Freight Sans Book";
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 20px;
	line-height: 24px;
	color: #666;
	display: block;
	}

div#nav-mobile a.tertiary {
	margin: 0px 0px 0px 0px;
	padding: 10px 20px 10px 100px;
	font-family: "Freight Sans Book";
	font-size: 22px;
	line-height: 24px;
	color: #777;
	display: block;
	}

div#nav-mobile a.tertiary:before {
	margin: 0px 0px 0px -30px;
	height: 20px;
	width: 20px;
	content: " ";
	background: url('/images/arrow-28x28-gray.png') no-repeat 50% 50%;
	background-size: 16px 16px;
	position: absolute;
	}
	}



/* 3.5 Buttons */

div.buttons {
	margin: 10px 0px 10px 0px;
	white-space: nowrap;
    }

div.buttons.tight {
	margin: 0px 0px 0px 0px;
    }

div.buttons.loose {
	margin: 20px 0px 20px 0px;
    }

div.marquee div.buttons {
	margin: 20px 0px 0px 0px;
    }

div.buttons:after {
	content: "";
	display: table;
	clear: both;
	}

a.button {
	margin: 0px 10px 0px 0px;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 20px 20px 20px 20px;
	box-shadow: 0px 2px 7px rgba(0,0,0,0.1);
	display: block;
 	float: left;
	transition-property: all;
	transition-duration: .1s;
	transition-timing-function: ease;
	}

a.button:hover {
	border: 1px solid rgba(0,0,0,0.3);
	box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
	transition-property: all;
	transition-duration: .1s;
	transition-timing-function: ease;
    }

div.marquee a.button {
	border: 1px solid rgba(0,0,0,0.4);
	box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
	}

div.marquee a.button:hover {
	border: 1px solid rgba(0,0,0,0.5);
	box-shadow: 0px 2px 7px rgba(0,0,0,0.3);
	transition-property: all;
	transition-duration: .1s;
	transition-timing-function: ease;
    }

div.marquee a.button:active {
	border: 1px solid rgba(0,0,0,0.4);
    }

a.button:active,
div.marquee a.button:active {
	transition-property: all;
	transition-duration: .1s;
	transition-timing-function: ease;
	box-shadow: none;
    }

a.button span.text {
	margin: 2px 2px 2px 2px;
	padding: 5px 15px 5px 15px;
	border-radius: 20px 20px 20px 20px;
	font-family: "Freight Sans Semibold";
	font-weight: normal;
	font-size: 12px;
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
 	float: left;
	}

a.button:active span.text {
	margin: 0px 0px 0px 0px;
	padding: 7px 17px 7px 17px;
	box-shadow: inset 0px 1px 5px rgba(0,0,0,0.25);
	}



/* 3.5.1 Centered Buttons */

div.buttons.center {
	float: left;
	position: relative;
	left: 50%;
	}

 div.buttons.center a.button {
	margin: 0px 5px 0px 5px;
	position: relative;
	right: 50%;
	}



/* 3.5.2 White Buttons */

a.button,
a.button.white {
	background: #fff;
	}

a.button span.text,
a.button.white span.text {
	color: #333;
	background: linear-gradient(#fbfbfb, #eee);
	}

a.button:hover span.text,
a.button.white:hover span.text {
	color: #000;
	background: linear-gradient(#fff, #e5e5e5);
	}

a.button:active span.text,
a.button.white:active span.text {
	background: linear-gradient(#ddd, #f9f9f9);
	}



/* 3.5.3 Blue Buttons */

a.button.blue {
	background: #77cee8;
	}

a.button.blue span.text {
	background: linear-gradient(#72bcd3, #5088b5);
	color: #fff;
	}

a.button.blue:hover span.text {
	background: linear-gradient(#72bcd3, #5088b5);
	}

a.button.blue:active span.text {
	background: linear-gradient(#5088b5, #72bcd3);
	color: #fff;
	}



/* 3.6 Tabs */

div.tabpage {
	margin: -56px 0px 0px 0px;
	padding: 56px 0px 0px 0px;
	z-index: 0;
	display: none;
	overflow: auto; /* prevents margin-collapse of nested column layouts */
	}

div.tabs {
	background: rgba(0,0,0,0.03);
	box-shadow: none;
	z-index: 100;
	position: relative;
	}

div.tabs.subtabs {
	border-top: 1px dashed rgba(0,0,0,0.11);
	display: none;
		}

div.tabs.subtabs#tabs {
	display: block;
		}

div.tabs div.content {
	padding: 0px 0px 0px 0px;
	text-align: center;
	}

div.tabs a {
	margin: 0px -2px 0px -2px;
	padding: 20px 15px 20px 15px;
	font-family: "Freight Sans Book";
	font-size: 14px;
	line-height: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #444;
	display: inline-block;
	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: ease;
	cursor: pointer;
	}

div.tabs a:hover {
	color: #0686cc;
	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: ease;
	}

div.tabs a.selected,
div.tabs a.selected:hover {
	color: #000;
	font-family: "Freight Sans Semibold";
	}

@media all and (max-width: 960px) {
div.tabs a {
	margin: 0px -2px 0px -2px;
	padding: 20px 13px 20px 13px;
	font-size: 13px;
	line-height: 16px;
	}
	}



/* 3.7 Footer */

div#footer img#logo-gam {
	margin: 0px 0px 5px 0px;
	width: 46px;
	height: 42px;
	display: block;
	float: right;
	}