@charset "UTF-8";
/* CSS Document */

body {
background: #000000;
margin:0 auto;
height: 100%;
color:#00072B;
font-size:100%;
	font-family: 'expressway_lt', 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: left;
padding: 0;
margin:0;}

p {margin: 0 0 15px 0; line-height: 160%; font-size: 105%;}
	
ul {margin: 10px 10px 20px; line-height: 160%; padding: 0 0 0 10px;}
li {margin: 0 0 5px 13px;}

strong {
	font-family: 'expressway_sb', 'robotomedium', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;}
	
em, i {    
	/*font-family: 'source_serif_prolight_italic', Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-weight:normal;*/}


a, a:link, a:visited {color:#d3271d; text-decoration: underline;}
a:hover {color:#0e1ac2; text-decoration: none;}
a:focus, a:active {color:#0eb3c2;}


   .container {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
	  -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      -o-flex-flow: row wrap;
      flex-flow: row wrap;
	  margin-left: auto;
      margin-right: auto;}


	@media (min-width: 1200px) {
      .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;}
    }
	
	@media (max-width: 1250px) {
      .container {
        width: 100%;
        margin-left: 0;
        margin-right: 0;}
	}

	 
 .c1 {width: 100%;} /*header*/
 .c2 {} /*header h1*/
 .c3 {width: 80%;} /*nav*/
 .c4 {width: 100%} /*content*/
 .c5 {}
 .c6 {width: 350px} /*column_l*/
 .c7 {width: 65%} /*column_r*/
 .c7a {width: 87%} /*column_1*/
 .c8 {width: 100%;} /*footer*/


#wrapper {
	background:#ffffff;
	padding:0;
	clear:both;	}
	

header {
	background: #000000;
	padding: 0;
	margin: 0;
	position:fixed;
	font-family: 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#ffffff;}
	

.logo {
  width: 220px;
  margin: 5px 20px 0 10%;
  float: left;}

.logo img {width:100%; height:auto;}

	
nav {
	padding: 0;
	margin: 0 10% 0 0;
	float:right;
	text-align:center;
	font-family: 'expressway_lt', 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:90%;
	letter-spacing: .05em;}

nav:after {
	content:"";
	display:table;
	clear:both;}

nav ul {
	display: inline-block;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;}
	
nav ul li {
	margin: 0;
	display:inline-block;
	padding: 0;}

nav ul ul {
	display: none;
	position: absolute; 
	margin:0;
	text-align:left;
	top:100%;}
	
nav ul li:hover > ul {display:inherit;}
	
nav ul ul li {
   	/*width: 220px;*/ /*without width specified here submenu will be as wide as items in menu. specified here in .services and .about*/
	display:list-item;
	position: relative;
	background-color:#b9bdba;
	letter-spacing: 0;}
	
nav a, nav a:link, nav a:visited {
	display:block;
	padding:14px 20px 17px;
	color:#fff;
	font-size:125%;
	line-height:18px;
	text-decoration:none;}

nav a:hover {color:#fff; background-color: #073b99;}

.contact a, .contact a:link, .contact a:visited {background-color: #ffffff; padding:7px 20px 9px; color:#000000;}
.contact a:hover {color:#fff; background-color: #073b99;}


.submenu {text-align: center;}
.submenu a, .submenu a:link, .submenu a:visited {color:#9ce2ff; background-color:#000000; padding:12px 20px;}
.submenu a:hover {color:#fff; background-color: #073b99;}	

.products {margin: 0 0 0 -67px; width: auto;}
.order {margin: 0 0 0 -65px; width: auto;}
.about {margin: 0 0 0 -70px; width: auto;}
.support {margin: 0 0 0 -54px; width: auto;}

.menu {display:none;}


#head_image_home, #head_image_contact {min-height: 400px;}

#head_image_home {
	background: #121d3e url("images/homepage-header.jpg") repeat-x left bottom;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	padding: 200px 10% 40px;}

#head_image_home h1, #head_image_contact h1 {	
	font-family: 'expressway_lt', 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	color:#ffffff;
	width: 350px;
	margin:1px 0 10px;
	font-size:300%;
	line-height:110%;}

#head_image_home h2, #head_image_contact h2 {	
	font-family: 'expressway_rg', 'robotoregular', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	color:#ffffff;
	width: 375px;
	margin:35px 0 5px 0;
	font-size:150%;
	line-height:130%;
	letter-spacing: .03em;}


#head_image_contact {
	background: #121d3e url("images/header-landscape-contact.jpg") repeat-x left bottom;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	padding: 200px 10% 40px;}


.quick_facts {
	float: right; 
	position: absolute; 
	right: 10%; 
	top: 550px;
	font-family: 'expressway_sb', 'robotomedium', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 125%;
	letter-spacing: .03em;}

.quick_facts a, .quick_facts a:link, .quick_facts a:visited {
	color:#ffffff; 
	background-color: #d3271d; 
	padding:6px 30px 9px; 
	text-decoration: none;}
.quick_facts a:hover {
	color:#d3271d; 
	background-color: #ffffff;}



h1 {	
	font-family: 'expressway_rg', 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	color:#073b99;
	margin:0 0 10px;
	font-size:190%;
	line-height:100%;}
	
h2 {	
	font-family: 'expressway_rg', 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	color:#073b99;
	margin:20px 0 5px 0;
	font-size:170%;
	line-height:130%;}

h3 {
	font-family: 'expressway_sb', 'robotomedium', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	color:#073b99;
	text-align: center;
	margin:10px 0 0 0;
	padding: 5px 0;
	font-size:125%;}
	
h4 {
	font-family: 'expressway_lt', 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:bold;
	color:#d3271d;
	margin:10px 0 0 0;
	font-size:125%;}

h4:hover {
  text-decoration: underline;
  cursor: pointer; /* optional: gives it a clickable feel */
}

h5 {
	font-family: 'expressway_sb', 'robotomedium', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	color:#073b99;
	margin:7px 0 0 0;
	font-size:118%;}

h6 {
  margin: 20px 0;
  padding: 10px 15px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-family: 'expressway_sb', 'robotomedium', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
  font-size: 1.1em;   /* normal size on desktop */
}

.pagehead {
	font-family: 'expressway_sb', 'robotomedium', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	margin:0 0 30px; 
	font-size:210%;}

.small {font-size:80%;}
	

#content {
	width: 1200px;
	text-align:left;
	min-height: 400px;
	margin: 20px auto 50px;}

.item_container {
	width:100%; 
	padding: 45px 17% 40px; 
	background-color:#ffffff;}
.first {margin: 70px 0 0 0; padding: 35px 17% 40px; }
.grey {background-color:#e1e1e1; }
.wide {width: 80%;}
.text {float:left; width: 50%;}

.container-75 {
  width: 75%;
  margin: 0 auto; /* centers it horizontally */
  padding: 20px 0; /* optional vertical padding */
}

.textwide {
  width: 70%;
  overflow: hidden; /* contains any floats inside it */
  margin-bottom: 40px;
}

.photo {
	float:left; 
	width:550px;
	margin:0 40px 0 0;}

.photo_r {
	float:right; 
	width:550px; 
	margin:0 0 0 40px;}

.photo_rsm {
	float:right; 
	margin:0 0 0 40px;}

.photo_sm {
	float:left; 
	width:125px; 
	margin:10px 20px 0 0;}

.photo_left {
  float: left;
  margin: 0 20px 10px 0; /* top, right, bottom, left */
  width: 200px; /* or whatever works for your layout */
  height: auto;
}

.clear {
  clear: both;
}

.photo img, .photo_r img, .photo_sm img {width: 100%; height: auto;}

.table {
  border-collapse: collapse; /* merges cell borders */
  width: 100%; /* optional */
}

.table th,
.table td {
  border: 1px solid #A2B6C7;  /* light border */
  padding: 10px;
  background-color: #FDFDFD; /* light gray background */
  text-align: left;
}

.responsive-video-small {
  width: 100%;
  max-width: 762px;  /* or whatever feels right */
  height: auto;
  display: block;
  margin: 0 auto 40px;
}

.responsive-video-large {
  width: 100%;
  max-width: 960px;  /* or 720px, 1080px — your call */
  height: auto;
  display: block;
  margin: 0 auto 40px;
}
.responsive-video {
  width: 960px;
  height: auto;
  max-width: 100%; /* prevents overflow if screen is smaller */
  display: block;
  margin: 0 auto; /* centers the video */
}

.order-button {
  display: inline-block;
  background-color: #d3271d;
  color: #ffffff !important;      /* Force white text */
  width: 200px;
  text-align: center;
  padding: 12px 0;
  font-size: 18px;
  font-family: 'expressway_sb', 'robotomedium', sans-serif;
  text-decoration: none !important;  /* Remove underline */
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.order-button:hover {
  background-color: #a81c14;
  color: #ffffff;
}

.order-button:visited {
  color: #ffffff;
}

.order-button:active {
  color: #ffffff;
}

.text-button {
  display: inline-block;
  background-color: #000000;
  color: #ffffff !important;      /* Force white text */
  text-align: center;
  padding: 12px;
  font-size: 20px;
  font-family: 'expressway_sb', 'robotomedium', sans-serif;
  text-decoration: none !important;  /* Remove underline */
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.text-button:hover {
  background-color: #a81c14;
  color: #ffffff;
}

.text-button:visited {
  color: #ffffff;
}

.text-button:active {
  color: #ffffff;
}


.three_col {
	background-color: #ffffff;
	width:30%; 
	margin: 0;
	float:left;}

.center {margin: 0 5%;}
.red-text {
  color: #d3271d; /* CrimeStar red */
}


.three_col h3 {
	font-family: 'expressway_sb', 'robotomedium', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	color:#ffffff;
	text-align: center;
	background-color: #0e1ac2;
	margin:0;
	padding: 7px;
	font-size:125%;}

.three_col .text {
	width: auto;
	color: #073b99;
	font-family: 'expressway_sb', 'robotomedium', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 105%;
	margin: 0;
	padding: 10px 30px 30px;}

.three_col ul {
	margin: 10px 0 20px 20px; 
	line-height: 160%; 
	padding: 0;
	list-style-image: url("images/triangle.png");}

.three_col li {margin: 0 0 15px 0;}

.two_col {width:50%; margin: 0; float:left;}


.divider {width:80%; margin: 5px 0 10px; border-top: #b0e0b5 1px solid;}


.hidden {visibility:hidden; position:absolute;}
.m_hidden { }

.clear {clear:both;}
.c_hidden { }

.f_hidden { }
.icon {visibility:hidden; position:absolute;}


#footer {
	/*footer bg comes from body bg*/
	font-family: 'expressway_lt', 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#fff;
	bottom: 0;
	font-size: 90%;
	padding: 0 0 40px;
	clear:both;}

#footer .space {padding:0 10px;}

#footer p {margin:0; color:#9ce2ff;}

#footer strong {font-family: 'robotobold', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal;}

/*#footer a, #footer a:link, #footer a:visited {color:#b0e0b5; text-decoration: none;}
#footer a:hover {color:#b0e0b5; text-decoration: underline;}
#footer a:focus, a:active {color:#fff;}*/

#footer_content {
	width: 100%;
	text-align:left;
	margin: 30px 17% 0;}

#footer h4 {
	font-family: 'expressway_lt', 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	color:#fff;
	margin:10px 0 0 0;
	font-size:125%;}

#footer h5 {
	font-family: 'expressway_sb', 'robotomedium', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	color:#fff;
	margin:7px 0 0 0;
	font-size:105%;}

.footer_container { }

.footer_left {
	float: left;
	width: 15%;}

.footer_left img {
	width: 100%; 
	height: auto; 
	max-width: 150px;
	margin: 0 0 5px 0;}

.footer_right {
	float: right;
	width: 85%;}

#footer nav {
	padding: 0;
	margin: 0;
	float:right;
	text-align:center;
	font-family: 'expressway_lt', 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: .05em;}

#footer nav:after {
	content:"";
	display:table;
	clear:both;}

#footer nav ul {
	display: inline-block;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;}
	
#footer nav ul li {
	margin: 0;
	display:inline-block;
	padding: 0;}

#footer nav ul ul {
	position: absolute; 
	margin:0;
	text-align:left;
	top:100%;}
	
#footer nav ul li:hover > ul {display:inherit;}
	
#footer nav ul ul li {
   	/*width: 220px;*/ /*without width specified here submenu will be as wide as items in menu. specified here in .services and .about*/
	display:list-item;
	position: relative;
	background-color:#b9bdba;
	letter-spacing: 0;}
	
#footer nav a, #footer nav a:link, #footer nav a:visited {
	display:block;
	padding:10px 15px 7px;
	color:#fff;
	font-size:125%;
	line-height:18px;
	text-decoration:none;}

#footer nav a:hover {color:#9ce2ff; background-color: transparent;}

#footer .contact a, #footer .contact a:link, #footer .contact a:visited {background-color: #ffffff; padding:7px 10px 10px; color:#000000;}
#footer .contact a:hover {color:#fff; background-color: #073b99;}

#footer .submenu {text-align: center;}
#footer .submenu a, #footer .submenu a:link, #footer .submenu a:visited {color:#9ce2ff; background-color:#000000; padding:7px 20px;}
#footer .submenu a:hover {color:#fff;}	

#footer .products {margin: 0 0 0 -63px; width: auto;}
#footer .order {margin: 0 0 0 -64px; width: 131px;}
#footer .about {margin: 0 0 0 -66px; width: auto;}
#footer .support {margin: 0 0 0 -53px; width: 108px;}


.space {padding:0 20px 0 0;}

.copyright {margin: 20px 0 0 0; font-size: 90%; left: 17%;}



@font-face {
    font-family: 'expressway_lt';
    src: url('fonts/expressway_lt-webfont.woff2') format('woff2'),
         url('fonts/expressway_lt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'expressway_lt_it';
    src: url('fonts/expressway_lt_it-webfont.woff2') format('woff2'),
         url('fonts/expressway_lt_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'expressway_rg';
    src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
         url('fonts/expressway_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'expressway_sb';
    src: url('fonts/expressway_sb-webfont.woff2') format('woff2'),
         url('fonts/expressway_sb-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family: 'robotolight';
    src: url('fonts/roboto-light-webfont.woff2') format('woff2'),
         url('fonts/roboto-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotolight_italic';
    src: url('fonts/roboto-lightitalic-webfont.woff2') format('woff2'),
         url('fonts/roboto-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotomedium';
    src: url('fonts/roboto-medium-webfont.woff2') format('woff2'),
         url('fonts/roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotobold';
    src: url('fonts/roboto-bold-webfont.woff2') format('woff2'),
         url('fonts/roboto-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}