html, body 
	{
	height: 100%;	
	}   

html.mfp-open, #case-studies.mfp-open, #product_thumbs.mfp-open, #activities.mfp-open 
	{
	overflow: hidden!important;
	margin-right:0!important;
	height: 100vh!important;
	width: 100%!important;
	}
	
html 
	{
	color: #222;
	font-size: 0.85em;
	line-height: 1.4;
	}

body
	{
	/*overflow-x: hidden; */
	background: #fff;
	}

img 
	{ 
	-ms-interpolation-mode: bicubic; 
	}	

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection 
	{
	background: #b3d4fc;
	text-shadow: none;
	}

::selection 
	{
	background: #b3d4fc;
	text-shadow: none;
	}

/*
 * A better looking default horizontal rule
 */

hr 
	{
	display: block;
	height: 1pt;
	border: 0;
	border-top: 1px solid #ccc;
	margin:  0 auto;
	padding: 0;
	}
	
/*
 * IE hr fix
 */	
 
hr.clear 
	{
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
	}
	
/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video 
	{
	vertical-align: middle;
	border: 0;	
	}

/*
 * Remove default fieldset styles.
 */

fieldset 
	{
	border: 0;
	margin: 0;
	padding: 0;
	}

/*
 * Allow only vertical resizing of textareas.
 */

textarea 
	{
	resize: vertical;
	}
	
li a 
	{
	outline: 0;
	}

svg 
	{ 
	pointer-events: none; 
	}

video.fullscreen, img.fullscreen 
	{ 
	width: 100%; 
	height: 100%;	
	position: absolute;
	top: 0;
	left: 0;
	z-index: 988;	
	}
	
video
	{
	object-fit: cover;
	font-family: 'object-fit: cover;';
	background: 50% 50% / cover no-repeat;	
	}

	
/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade 
	{
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
	}

/* ==========================================================================
   Fonts
   ========================================================================== */	
 @font-face 
	{
	font-family: 'roboto';
	src: url('../fonts/Roboto-Regular-webfont.eot');
	src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Roboto-Regular-webfont.woff') format('font-woff'),
		 url('../fonts/Roboto-Regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: fallback;	
	}

@font-face 
	{
	font-family: 'robotoitalic';
	src: url('../fonts/Roboto-Italic-webfont.eot');
	src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Roboto-Italic-webfont.woff') format('font-woff'),
		 url('../fonts/Roboto-Italic-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: fallback;	
	}

@font-face 
	{
	font-family: 'robotobold';
	src: url('../fonts/Roboto-Bold-webfont.eot');
	src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Roboto-Bold-webfont.woff') format('font-woff'),
		 url('../fonts/Roboto-Bold-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: fallback;	
	}

@font-face 
	{
	font-family: 'robotolight';
	src: url('../fonts/Roboto-Light-webfont.eot');
	src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Roboto-Light-webfont.woff') format('font-woff'),
		 url('../fonts/Roboto-Light-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: fallback;	
	}

@font-face 
	{
    font-family: 'robotothin';
    src: url('../fonts/Roboto-Thin-webfont.eot');
    src: url('../fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Thin-webfont.woff') format('font-woff'),
         url('../fonts/Roboto-Thin-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-display: fallback;	
	}
	
@font-face 
	{
	font-family: 'amaticbold';
	src: url('../fonts/amatic-bold-webfont.woff') format('font-woff'),
         url('../fonts/Amatic-Bold.ttf') format('truetype');		 
	font-weight: normal;
	font-style: normal;
	}

@font-face 
	{
	font-family: 'amatic_scregular';
	src: url('../fonts/amaticsc-regular-webfont.woff') format('font-woff'),
         url('../fonts/AmaticSC-Regular.ttf') format('truetype');		 
	font-weight: normal;
	font-style: normal;
	}

/* ==========================================================================
   Custom font styles
   ========================================================================== */
p {font-family: 'roboto', Tahoma, Geneva, sans-serif; font-size: 1.5em; font-size: 1.25vw; font-size: calc(0.75vw + 1vmin);}

p.light {font-family: 'robotolight', Tahoma, Geneva, sans-serif;}

i.light, em.light {font-family: 'robotolight_italic', Tahoma, Geneva, sans-serif;}

b, strong {font-family: 'robotobold', Tahoma, Geneva, sans-serif;} 

i, em {font-family: 'robotoitalic', Tahoma, Geneva, sans-serif;}

b i, strong i, b em, strong em {font-family: 'robotobold_italic', Tahoma, Geneva, sans-serif;}

h1 {font-family: 'robotobold', Tahoma, Geneva, sans-serif; font-size: 2.5em; font-size: 2.25vw; font-size: calc(1.75vw + 1vmin); line-height: 1;} 

h2 {font-family: 'robotothin', Tahoma, Geneva, sans-serif; font-size: 1.75em; font-size: 1.5vw; font-size: calc(1.25vw + 1vmin); line-height: 1;}	

p.left-aligned {text-align: left;}

p.intro-text {font-family: 'Amatic SC', cursive; font-size: 2.5em; font-size: 2.25vw; font-size: calc(1.75vw + 1vmin); line-height: 1; color: #007fba; display: inline;}

h1.intro-text {font-family: 'Amatic SC', cursive; font-size: 1.75em; font-size: 1.5vw; font-size: calc(3.25vw + 3vmin); line-height: 1; color: #007fba; display: inline;}

h2.intro-text {font-family: 'Amatic SC', cursive; font-size: 1.5em; font-size: 1.25vw; font-size: calc(2.25vw + 2vmin); color: #007fba; display: inline;}


 /* ==========================================================================
   Full-page images
   ========================================================================== */   
.bg-overlay
	{
	position: relative;
	background: #061631;
	opacity: 0;
	filter: alpha(Opacity=0);	
	height: 100%;
	z-index: 989;
	width: 100%;
	} 
	
#contact .bg-overlay
	{
	position: relative;
	background: #12345a;
	opacity: 0;
	filter: alpha(Opacity=0);
	height: 100%;
	z-index: 989;
	width: 100%;
	mix-blend-mode: lighten;
	}	

.main-bg
	{
	background-position: center;
	} 
	
.ideation-bg
	{
	background-position: left;
	} 

.manufacturing-bg
	{
	background-position: center;
	} 

.fulfillment-bg
	{
	background-position: left;
	} 

.contact-bg
	{
	background-position: center;
	} 	
		
/* ==========================================================================
   Navigation
   ========================================================================== */   
   
#nav_container 
	{
	width: 100vw;
	position: fixed;
	z-index: 1500;
	display: table;
	height: 10vh;
	}
	
#nav_container a
	{
	display: table-cell;
	vertical-align: middle;
	}
	   
nav ul,
nav ol, 
nav li 
	{
	margin: 0;
	padding: 0;
	float: left;
	}

nav a 
	{
	display: block;
	padding: 4%;
	text-decoration: none;
	color: #d0d0d0;
	}
   
nav ul ul 
	{
	max-width: 11em;
	background-color: #585858;
	position: absolute;
	z-index: 99;
	display: none;
	}

nav ul ul li 
	{
	width: 100%;
	}

nav li:hover ul 
	{
	display: block;
	}
   
nav.site-menu li 
	{
	width: 200%;
	list-style: none;
	}

.eng_button a 
	{
	padding: 0.6em 10%;
	width: 80%;
	}   
 
.site-menu
	{
	margin: 0; 
	position: fixed; 
	top: 10vh; 
	right: 16%;	
	max-height:80vh;
	} 

#header_container
	{
	width: 100%;
	background: #000;	
	z-index: 1000;
	top: 0;
	margin-top: 0;
	display: block;
	position: sticky;
	opacity: 0.4;
	float: left;
	}
	
a.link
	{
	text-decoration: none;	
	/*margin: 20px 0px;*/
	}
	
.header_text
	{
	color: #fff; 
	font-family: 'roboto', Tahoma, Geneva, sans-serif;	
	font-size: medium; 
	text-decoration: none;
	}

#menu_label
	{
	float: left;
	color: #fff;
	font-family: 'roboto', Tahoma, Geneva, sans-serif;	
	font-size: large;
	display: table-cell;
	vertical-align: middle;
	}	

#nav_arrows
	{
	bottom: 2%;
	z-index: 8999;	
	position: fixed;
	margin: 0 auto;	
	width: 99vw;
	text-align: center;
	}
	
.fas.fa-caret-up
	{
	font-size: 64px;
	font-size: calc(32px + 4vmin);
	color: #fff;
	text-decoration: none;
	opacity: 0.4;
	}

.fas.fa-caret-down
	{
	font-size: 64px;
	font-size: calc(32px + 4vmin);
	color: #fff;
	text-decoration: none;
	opacity: 0.4;
	}

.noscroll 
	{ 
	overflow-y: hidden; 
	}

.overlay
	{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;

	.overlay-content 
		{
		height: 100%;
		overflow: scroll;
		}
	}

.background-content
	{
	height: 100%;
	overflow: auto;
	}

[aria-hidden="true"] 
	{ 
	display: none; 
	}

[aria-hidden="false"] 
	{ 
	display: block; 
	}
	
.nav-down 
	{
	bottom: -20%;
	}
	
footer 
	{
	height: 9%;
	padding-top: 1%;
	position: fixed;
	top: 90vh;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9994;
	-webkit-transition: bottom 0.2s ease-in-out;
	-o-transition: bottom 0.2s ease-in-out;
	-moz-transition: bottom 0.2s ease-in-out;
	transition: bottom 0.2s ease-in-out;
	width: 100%;
	} 	

.footer_bg
	{
	margin: 0 auto; 
	text-align: center;			
	position: absolute;	
	width: 100%;
	height: 100%;
	opacity: 0.4;
	background: #000;
	z-index: 9995;	
	}

.footer_container
	{
	margin: 0 auto; 
	text-align: center;	
	width: 100%;
	z-index: 9996;
	}
	
.footer_content
	{
	margin: 0 auto; 
	text-align: center;	
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 9997;	
	color: #fff; 
	text-decoration: none;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-flow: row wrap;
	   -moz-box-orient: horizontal;
	   -moz-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	   -moz-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	}
	
.footer_content div.flex-item
	{
	padding: 1%;
	height: 5vh;
	margin-top: 1%; 
	text-align: left;
	}
	
.footer_content > div:nth-child(1)
	{
	width: 60%; 
	font-size: 0.85em;	
	font-size: 1vw;
	font-size: calc(0.5vw + 1vmin);
	}

.footer_content > div:nth-child(2)
	{
	width: 25%;
	padding-right: 9%;	
	font-size: 0.85em;	
	font-size: 1vw;
	font-size: calc(0.5vw + 1vmin);	
	}	
	
.footer_content p
	{
	/*padding-top: 1%;*/
	padding-left: 11%;	
	font-size: 0.85em;
	font-size: 1vw;
	font-size: calc(0.5vw + 1vmin);	
	}	
		
/* ==========================================================================
   End Navigation
   ========================================================================== */ 

/* ==========================================================================
   Hamburger Menu
   ========================================================================== */    
#menu a, .eng_button a, .qual_button a
	{
	color: #fff; 
	font-family: 'robotobold', Tahoma, Geneva, sans-serif; 
	text-decoration: none;
	}

#menu a:hover
	{
	font-family: 'robotobold', Tahoma, Geneva, sans-serif; 
	text-decoration: none;	
	color: #FFD400;
	}
	
#menu_container
	{
	position: absolute;
	text-align:left;
	z-index: 999;		
	display: block;
    -webkit-transform: translate(30em,0);
       -moz-transform: translate(30em,0);
        -ms-transform: translate(30em,0);
         -o-transform: translate(30em,0);
            transform: translate(30em,0);
	-webkit-transition: 0.5s ease-out;
	-o-transition: 0.5s ease-out;
	-moz-transition: 0.5s ease-out;
	transition: 0.5s ease-out;
	}

#menu_container a
	{
	display: block;	
	}
	
#menu_container.menu-active 
	{
	position: absolute;	
	top: 0;	
    -webkit-transform: translate(0em,0);
       -moz-transform: translate(0em,0);
        -ms-transform: translate(0em,0);
         -o-transform: translate(0em,0);
            transform: translate(0em,0);
	-webkit-transition: 0.5s ease-out;
	-o-transition: 0.5s ease-out;
	-moz-transition: 0.5s ease-out;
	transition: 0.5s ease-out;
	}
	
.hamburger, .is-active 
	{
	display: table-cell;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible; 
	}
  
.hamburger:hover 
	{
	opacity: 0.7; 
	}

.hamburger-box 
	{
	width: 40px;
	height: 24px;
	display: inline-block;
	position: relative; 
	}

.hamburger-inner 
	{
	display: block;
	top: 50%;
	margin-top: -2px; 
	}
  
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after 
	{
	width: 40px;
	height: 4px;
	background-color: #fff;
	border-radius: 4px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease; 
	}
	
.hamburger-inner::before, .hamburger-inner::after 
	{
	content: "";
	display: block; 
	}
	
.hamburger-inner::before 
	{
	top: -10px; 
	}
	
.hamburger-inner::after 
	{
	bottom: -10px;
	}

/*
* 3DY Hamburger Type
*/
	
.hamburger--3dy .hamburger-box 
	{
	perspective: 80px; 
	}

.hamburger--3dy .hamburger-inner 
	{
	transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 
	}
	
.hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after 
	{
	transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 
	}

.hamburger--3dy.is-active .hamburger-inner 
	{
	background-color: transparent;
	transform: rotateX(-180deg); 
	}
  
.hamburger--3dy.is-active .hamburger-inner::before 
	{
	transform: translate3d(0, 10px, 0) rotate(45deg); 
	}
	
.hamburger--3dy.is-active .hamburger-inner::after 
	{
	transform: translate3d(0, -10px, 0) rotate(-45deg); 
	}

/* ==========================================================================
   End Hamburger Menu
   ========================================================================== */ 
 
/* ==========================================================================
   Page Sections
   ========================================================================== */ 

#home
	{
	max-width: 100vw;	
	width: 100%;
	height: 100vh;	
	margin: 0 0 10% 0;
	padding: 0;
	border: 0;
	}

#ideation, #design, #fulfillment, #manufacturing
	{
	width: 100%;
	height: 100vh;	
	margin: 10% 0;
	padding: 0;
	border: 0;
	}

#contact
	{
	width: 100%;
	height: 100vh;		
	margin: 10% 0 0 0;
	padding: 0;
	border: 0;
	}


/* ==========================================================================
   End Page Sections
   ========================================================================== */ 

/* ==========================================================================
   Content Styles
   ========================================================================== */    
.content
	{
	z-index: 991;
	overflow: hidden;	
	padding: 5%;
	}
	
.content-bg-ideation, .content-bg-manufacturing, .content-bg-fulfillment, .content-bg-contact
	{
	z-index: 2001;	
	opacity: 0.85;
	filter: alpha(opacity=85);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;	
	width: 100%;
	height: 100%;		
	display: table-cell;
	vertical-align: middle;	
	text-align: center;
	border: 2px solid;	
	position: absolute;
	}

.content-bg-ideation, .content-bg-manufacturing, .content-bg-fulfillment, .content-bg-contact 
	{
	background: #036;
	border: 2px solid;
	border-color: #025;	
	}
	
	
.content-text
	{
	color: #fff; 		
	z-index: 2002;
	opacity: 1;
	position: relative;	
	width: 100%;
	height: 100%;	
	margin: 5%;
	overflow-wrap: break-word;
	word-wrap: break-word;	
	display: table-cell;
	vertical-align: middle;	
	text-align: center;	
	overflow-y: hidden;
	-ms-overflow-style: none;
	}	
.content-text h2

{
	line-height: 1.4;
}
	
.content.ideation, .content.manufacturing
	{
	display: table;	
	table-layout:fixed;	
	position: absolute;
	top: 25%;
	bottom: 25%;
	right: auto;
	left: 0;
	width: 40%;	
	padding: 5vw;
	vertical-align: middle;
	text-align: center;
	}

.content.design
	{
	max-height: 80vh;
	min-height: 80vh;
	width: 100%;		
	padding: 0% 5%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-flow: row wrap;
	   -moz-box-orient: horizontal;
	   -moz-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-flex-direction: row;
	    -ms-flex-direction: row;
	        flex-direction: row;	
	-webkit-flex-wrap: wrap;	
	    -ms-flex-wrap: wrap;	
	        flex-wrap: wrap; 
	-webkit-box-pack: center; 
	-webkit-justify-content: center; 
	   -moz-box-pack: center; 
	    -ms-flex-pack: center; 
	        justify-content: center;			
	}
.content.design
	{
	padding: 0;
	}
	
#design div.content_container
	{
	background: #fff;	
	}	
	
.content.fulfillment
	{
	position: absolute;
	top: 25%;
	bottom: 25%;
	right: 0;
	padding: 2.5vh 5vw;
	width: 40%;
	vertical-align: middle;
	display: table;
	text-align: center;
	}

.content.contact
	{
	position: absolute;
	top: 10vh;
	bottom: 8vh;
	right: 0;
	padding: 2.5% 5%;
	width: 30%;
	vertical-align: middle;
	display: table;
	text-align: center;
	list-style: none;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-flow: row wrap;
	   -moz-box-orient: horizontal;
	   -moz-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-justify-content: space-around;
	    -ms-flex-pack: distribute;
	        justify-content: space-around;	
	}
	
.content.contact div.content-text
	{
	color: #fff;
	z-index: 2002;
	opacity: 1;
	position: relative;
	width: 100%;
	height: 90%;
	margin: 5%;
	overflow-wrap: break-word;
	word-wrap: break-word;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	overflow-y: initial;
	flex-flow: column;	
	}


.content_container
	{
	color: #fff; 
	text-decoration: none;
	max-height: 100vh;
	position: absolute;
	width: 100%;
	z-index: 990;
	height: 100vh;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	}   
	
.contact div.flex-item
	{	
	padding: 0%;
	line-height: 0.25;
	margin: 1% 0 -3% 0;
	}

.contact div.address
	{
	/*flex: 1 1 30%;*/
	text-align: left;	
	line-height: 0.5;
	}

.contact div.contact-info
	{
	text-align: center;	
	margin: 5% 0;
	}	

.fullwidth
	{
	width: 100%;
	}
	
.content_container h1, .content_container hr
	{
	text-align: center;
	}
	
.contact h1
	{
	text-align: left;	
	}
	
.content_container object
	{
	width: 100%;
	height: 100%;
	}
	
.content.main
	{
	padding: 0% 5% 0 5%;
	max-height: 80vh;	
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-flow: row wrap;
	   -moz-box-orient: horizontal;
	   -moz-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;	
	-webkit-flex-direction: row;	
	    -ms-flex-direction: row;	
	        flex-direction: row;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;		
	}
	
.bg-overlay-main
	{
	background: #fff;
	opacity: 0.5;	
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	}

/* ==========================================================================
   End Content Styles
   ========================================================================== */  
   
/* ==========================================================================
   SVG Containers
   ========================================================================== */ 
   
#logo_container
	{		
	z-index: 9999;
	display: table-cell;
	float: left;
	}	
	
#logo_container object
	{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	text-align: center;
	vertical-align: middle;
	}
	
			
	
/* ==========================================================================
   End SVG Containers
   ========================================================================== */ 

 
/* ==========================================================================
   Page items for windowpane layout
   ========================================================================== */
   
.page_item_container
	{
	padding: 0;
	margin: 0;
	width: 100%;
	max-width: 100vw;	
	height: auto;
	min-height: 100%;
	max-height: 80vh;
	overflow: hidden;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-moz-box-orient: horizontal;
	-moz-box-direction: normal;
	-ms-flex-direction: row;
	        flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	        justify-content: center;	
	}
	
.page_item_container a
	{	
	width: 50%;
	max-width: 50%;	
	}
	
.page_item 
	{
	width: 42%;
	max-width: 42%;
	height: auto;	
	max-height: 28vh;
	overflow: hidden;
	padding: 0%;
	margin: 1%;	
	z-index: 1200;
	position: relative;
	}

.design_heading
	{
	text-align: center;
	color: #999;
	}

.design_text_left 
	{		
	color: #fff;
	width: 50%;
	height: auto;
	max-height: 28vh;
	left: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	right: auto;
	z-index: 1202;
	}

.design_text_right 
	{
	color: #fff;
	width: 50%;
	height: auto;
	max-height: 28vh;
	position: absolute;
	left: auto;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 1202;	
	}
	
.design_text_left h1, .design_text_right h1 
	{
	margin: 5%;
	font-size: 2em; 
	font-size: 2vw;
	font-size: calc(1vw + 1vmin);	
	line-height: 0.75;
	text-align: left;	
	}	

.design_text_left  h2, .design_text_right h2
	{
	margin: 5%;
	font-size: 2em; 
	font-size: 2vw;
	font-size: calc(1vw + 1vmin);		
	line-height: 0.75;
	text-align: left;
	}

.design_01_overlay 
	{
	background: #036;
	opacity: 0.85;
	filter: alpha(opacity=85);	
	width: 50%;
	height: auto;
	max-height: 28vh;
	left: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	right: auto;
	z-index: 1201;	
	}

.design_02_overlay
	{
	background: #036;
	opacity: 0.85;
	filter: alpha(opacity=85);		
	width: 50%;
	height: auto;
	max-height: 28vh;
	position: absolute;
	top: 0;
	left: 0;	
	right: auto;	
	bottom: 0;
	z-index: 1201;	
	}

.design_03_overlay
	{
	background: #036;
	opacity: 0.85;
	filter: alpha(opacity=85);		
	width: 50%;
	height: auto;
	max-height: 28vh;
	position: absolute;
	top: 0;
	left: auto;	
	right: 0;	
	bottom: 0;
	z-index: 1201;	
	}

.design_04_overlay
	{
	background: #036;
	opacity: 0.85;
	filter: alpha(opacity=85);		
	width: 50%;
	height: auto;
	max-height: 28vh;
	position: absolute;
	top: 0;
	left: auto;	
	right: 0;	
	bottom: 0;
	z-index: 1201;	
	}
	
.lazy
	{
    width: auto;
    max-width: 100%;	
    height: 100vh;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	}
	
.lazy-background
	{
    width: auto;
    max-width: 100%;	
    height: 100vh;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
	background-repeat: no-repeat;
	}	
	
.lazy-horiz
	{
    max-width: 100%;
    height: auto;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}	
	
.design-image-container
	{
	display: table;
	width: 60em; /* Or whatever you want it to be */
	height: 60em /* Or whatever you want it to be */
	}

img.design-image
	{
	width: 1000px;
	height: 420px;
	position: relative;
	display: table-cell;
	}	
	
img.design-image
	{
	object-fit: cover;
	}	
		
.custom-design-image-fit /*fix for object-fit: cover in old browsers*/
	{
	object-fit: cover;
	object-position: bottom;
	font-family: 'object-fit: cover; object-position: bottom;';
	}

/* ==========================================================================
   Media Queries
   ========================================================================== */
   

/* Large devices (laptops/desktops, 992px and up) */
@media screen and (min-width: 993px)
{
	.mobile
		{
		display: none;
		}	
		
	#logo_container
		{
		width: 50%;		
		min-width: 55em;
		margin-left: 8%;
		}
		
	#header_contact
		{
		margin: 2% 15%;			
		float: right;
		}	

	#header_container
		{
		min-height: 10vh;
		}
		
	.page-navigation 
		{
		display: table-cell;
		vertical-align: middle;
		width: 16%;
		}		
		
	#menu li
		{
		padding: 0.5vh 5%;
		font-size: medium;
		}	
	
	#menu_bg 
		{
		background: #000;
		opacity: 0.4;			
		width: 100%;
		height: 100%;
		padding-left: 200%;
		padding-bottom: 10%;
		margin-left: -20%;
		position: absolute;
		}
		
	#contact .flex-item h1
		{
		font-size: 3vw;
		}
		
	#contact .flex-item h2
		{
		font-size: 2vw;
		}
		
	.footer_content > div.flex-item:nth-child(2) > p
		{
		font-size: 0.75em;	
		font-size: 0.85vw;
		font-size: calc(0.5vw + 0.85vmin);			
		}
		
	nav ul, nav ol, nav li 
		{
		position: relative;
		z-index: 9999;		
		}

	hr
		{
		width: 50%;
		}
}
  /* Medium devices landscape (tablets, 600px and up) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape)
{
	
	#logo_container
		{
		width: 50%;		
		min-width: 55em;
		margin-left: 8%;
		}
		
	#header_contact
		{
		margin: 2% 15%;			
		float: right;
		}	

	#header_container
		{
		min-height: 10vh;
		}
		
	.page-navigation 
		{
		display: table-cell;
		vertical-align: middle;
		width: 16%;
		}		
		
	#menu li
		{
		padding: 0.5vh 5%;
		font-size: medium;
		}	
	
	#menu_bg 
		{
		background: #000;
		opacity: 0.4;			
		width: 100%;
		height: 100%;
		padding-left: 200%;
		padding-bottom: 10%;
		margin-left: -20%;
		position: absolute;
		}
		
	
	.site-menu 
		{
		margin: 0;
		position: fixed;
		top: 10vh;
		right: 22%;
		max-height: 80vh;
		}


	.design-image-container
		{
		width: 40em;
		height: 40em;
		margin: 0 -20%;
		}	

	img.design-image	
	{
		position: relative;	
		object-fit: cover;
		}			
}	
 /* Medium devices portrait (tablets, 600px and up) */
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation: portrait)
{
	
	.mobile
		{
		display: none;
		}	
		
	#logo_container
		{
		width: 80%;
		min-width: 28em;
		padding: 2vh 4vw;
		display: table-cell;
		vertical-align: middle;
		}
		
	#header_container
		{
		min-height: 10vh;
		}	
		
	#header_contact
		{
		margin: 2% 15%;
		float: right;		
		}	
		
	.page-navigation 
		{
		margin-top: 2%;			
		right:10%;
		}
		
	nav.site-menu li 
		{
		margin-top: 2%;			
		right:10%;
		}
		
	nav ul, nav li 
		{
		position: relative;
		z-index: 9999;
		}	
		
	#menu li
		{
		padding: 0.2vh 5%;
		font-size: medium;
		}	
		
	#menu_label
		{
		display: none;
		}

	#menu_bg 
		{
		background: #000;
		opacity: 0.4;			
		width: 100%;
		height: 100%;
		padding-left: 200%;
		padding-bottom: 10%;
		margin-left: -20%;
		position: absolute;
		}
		
	.site-menu 
		{
		margin: 0;
		position: fixed;
		top: 10vh;
		right: 24%;
		max-height: 70vh;
		}	
		
	.hamburger
		{		
		padding: 2vh;
		-webkit-transform: scale(0.8);
		   -moz-transform: scale(0.8);
		    -ms-transform: scale(0.8);
		     -o-transform: scale(0.8);
		        transform: scale(0.8);						
		}	
		
	.page-navigation 
		{
		display: table-cell;
		vertical-align: middle;
		}	
		
	.content
		{
		padding: 15% 15% 0 15%;	
		}
		
	.content.ideation, .content.fulfillment 
		{
		display: table;
		table-layout: fixed;
		position: absolute;
		top: 20vh;
		bottom: 15vh;
		right: 0;
		left: auto;
		width: 40%;
		padding: 5%;
		vertical-align: middle;
		text-align: center;
		height: 60%;
		}

	.content_container h1 
		{
		font-size: calc(2.75vw + 2vmin);
		line-height: 1;
		}	

	.content_container h2 
		{
		font-size: calc(1.25vw + 2vmin);
		line-height: 1;
		}	
		
	.content p 
		{
		font-size: calc(1.25vw + 1vmin);
		}		
		
	hr
		{
		width: 50%;
		}		
		
	.footer_content div.flex-item
		{
		padding: 0%;
		height: 5vh;
		margin-top: 1%;
		line-height: initial;
		text-align: left;
		}	
		
	.footer_content > div:nth-child(2) 
		{
		width: 20%;
		padding-right: 10%;
		line-height: initial;
		font-size: 0.85em;	
		font-size: 1vw;
		font-size: calc(0.5vw + 1vmin);
		}	
			
	#contact .content p 
		{
		font-size: calc(1.25vw + 1vmin);
		display: block;
		height: 10%;
		line-height: initial;
		}
		
	#contact .flex-item h1
		{
		font-size: calc(3vw + 1vmin);
		}
		
	#contact .flex-item h2
		{
		font-size: calc(2vw + 1vmin);
		}
		
	#contact .flex-item p 
		{
		font-size: calc(0.75vw + 1vmin);
		line-height: 1;
		margin: 0;
		}	
		
	.content.contact
		{
		padding: 5%;
		margin: 0 2% 0 -7%;	
		}

	.contact div.contact-info
		{
		padding-top: 15%;
		margin-left: 2%;	
		}
			
} 

 /* Small devices (phones up to 600px) */
@media screen and (max-width: 600px) 
{
	
	h1 
		{
		font-size: 1.35em;
		font-size: 8vw;
		font-size: calc(5vw + 3vmin);			
		line-height: 1;
		}
		
	h2 
		{
		font-size: 0.75em;
		font-size: 4vw;
		font-size: calc(3.5vw + 2vmin);			
		line-height: 1;
		}	
	
	#header_container
		{
		min-height: 40px;
		}	
		
	#logo_container
		{		
		width: 80%;
		max-width: 28em;
		margin: 2%;
		}	
	
	#nav_container
		{
		height: 5vh;	
		}
	
	.page-navigation
		{
		position: fixed;	
		top: 0;
		right: 0;
		text-align: right;
		z-index: 9999;
		display: table-cell;
		vertical-align: middle;
		}
		
	nav.site-menu
		{
		background: #061631;			
		height: 100vh;
		z-index: 999;
		top: 0;
		right: 80%;
		bottom: auto;
		}	
		
	.page-navigation.nav-active 
		{
		position: fixed;	
		top: 0;
		right: 0;			
		background: #061631;			
		width: 100%;
		height: 100vh;
		z-index: 999;	
		}
		
	.hamburger, .is-active
		{
		position: fixed;
		top: 1%;
		right: 1%;
		left: auto;
		bottom: auto;
		padding: 0%;		
		-webkit-transform: scale(0.7);	
		   -moz-transform: scale(0.7);	
		    -ms-transform: scale(0.7);	
		     -o-transform: scale(0.7);	
		        transform: scale(0.7);			
		}	
		
	#menu_container
		{
		position: absolute;
		top: 10%;
		left: 6%;
		opacity: 0		
		}
		
	#menu_container.menu-active 
		{
		opacity: 1;	
		position: absolute;
		top: 10%;
		left: 6%;	
		}
	
	#menu li
		{
		font-size: medium;
		font-size: calc(2.5vw + 2.5vmin);			
		}

	nav ul, nav ol, nav li
		{
		margin: 0; 
		padding: 0;
		float: left;		
		}

	#menu_label
		{
		display: none;
		}
		
	#nav_arrows
		{
		bottom: 0;		
		}
					
	.mobile
		{
		display: table;
		margin: 0 auto;
		text-align: center;
		}	

	.mobile object
		{
		display: table-cell;
		margin: 0 auto;
		text-align: center;
		}	
	.main-bg
		{
		background-position: 25% 0;
		} 	
	.ideation-bg
		{
		background-position: 60% 0;
		} 

	.manufacturing-bg
		{
		background-position: 50% 0;
		} 

	.fulfillment-bg
		{
		background-position: 65% 0;
		} 

	.contact-bg
		{
		background-position: 10% 0;
		} 	
	
	.content_container p
		{		
		font-size: 0.5em;
		font-size: 4vw;
		font-size: calc(2.25vw + 1vmin);		
		}	

	.content
		{
		width: 100%;			
		padding: 10% 5% 0 5%;
		overflow: hidden;
		}
		
	.content.ideation,  .content.manufacturing, .content.fulfillment
		{
		opacity: 1;
		filter: alpha(opacity=100);			
		width: 90%;
		padding: 5% 5% 0 5%;
		top: 0%;
		left: 0%;
		right: 0;
		bottom: 0%;
		overflow-x: hidden;
		border: none;
		display: flex;
		align-items: center;
		flex-direction: column;	
		z-index: 2000;
		border: none;
		}	
		
	.content.ideation
		{
		top: 10%;
		}		

	.content-bg-ideation 
		{
		opacity: 1;
		filter: alpha(opacity=100);	
		
		background: -moz-linear-gradient(bottom, rgba(0,51,102,1) 60%, rgba(0,0,0,0) 100%); 
		background: -webkit-linear-gradient(bottom, rgba(0,51,102,1) 60%,rgba(0,0,0,0) 100%); 
		background: linear-gradient(to top, rgba(0,51,102,1) 60%,rgba(0,0,0,0) 100%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003366', endColorstr='#00000000',GradientType=0 );
		
		position: absolute;
		top: 30%;
		left: 0;
		right: 0;
		bottom: 0;
		border: none;		
		}

	.content-bg-manufacturing
		{
		opacity: 1;
		filter: alpha(opacity=100);			
		
		background: -moz-linear-gradient(bottom, rgba(0,51,102,1) 60%, rgba(0,0,0,0) 100%); 
		background: -webkit-linear-gradient(bottom, rgba(0,51,102,1) 60%,rgba(0,0,0,0) 100%); 
		background: linear-gradient(to top, rgba(0,51,102,1) 60%,rgba(0,0,0,0) 100%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003366', endColorstr='#00000000',GradientType=0 );
		
		position: absolute;
		top: 30%;
		left: 0;
		right: 0;
		bottom: 0;
		border: none;			
		}
		
	.content-bg-fulfillment
		{
		opacity: 1;
		filter: alpha(opacity=100);					
		
		background: -moz-linear-gradient(bottom, rgba(0,51,102,1) 60%, rgba(0,0,0,0) 100%); 
		background: -webkit-linear-gradient(bottom, rgba(0,51,102,1) 60%,rgba(0,0,0,0) 100%); 
		background: linear-gradient(to top, rgba(0,51,102,1) 60%,rgba(0,0,0,0) 100%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003366', endColorstr='#00000000',GradientType=0 );
		
		position: absolute;
		top: 30%;
		left: 0;
		right: 0;
		bottom: 0;
		border: none;			
		}
		
	.content.contact
		{
		width: 100%;			
		padding: 0 1%;
		overflow: hidden;
		top: 5vh;
		bottom: 9vh;
		}	

	.content-text
		{
		top: 30%; 
		}	
		
	.content.contact div.content-text	
		{
		top: 0; 
		}	
		
	.contact div.flex-item 
		{
		padding: 0%;
		text-align: left;
		width: 100%;
		line-height: normal;
		height: initial;
		margin: 1%;
		}
	
	.contact div.flex-item p
		{ 
		font-size: calc(3vw + 1vmin);
		margin: 0;
		text-align: center;
		}	
		
	.contact div.flex-item h1
		{ 
		font-size: calc(3vw + 3vmin);
		text-align: center;		
		}	
			
	.contact div.flex-item h2
		{ 
		font-size: calc(3vw + 2vmin);
		text-align: center;		
		}	
		
	.contact div.address 
		{
		flex: none;
		}		
		
	.footer_content p
		{
		overflow: visible;
		padding: 0 0 0 0;
		font-size: 0.5em;
		font-size: 2.5vw;
		font-size: calc(1.5vw + 1vmin);			
		text-align: left;
		}	
		
	.footer_content div.flex-item 
		{
		height: auto;
		margin: 0 0 2% 0;
		padding: 0 2%;
		vertical-align: middle;
		}	
				
	.footer_content > div:nth-child(1) 
		{
		width: 66%;
		}	
	.footer_content > div:nth-child(2) 
		{
		width: 26%;
		line-height: initial;
		font-size: 0.75em;	
		font-size: 0.85vw;
		font-size: calc(0.5vw + 0.85vmin);						
		}		

	img.design-image
		{
		width:100%;
		max-width:100vw;		
		height: auto;
		}
	
	.page_item_container a, .page_item_container div.page_item  
		{
		max-width:100%;	
		width: 100%;
		max-height: 15vh;
		}
		
	.page_item_container 
		{
		height: inherit;
		margin-top: 2vh;
		display: flex;
		justify-content: space-between;
		}
		
	.design_text_left, .design_text_right, 	.design_text_left h1, .design_text_right h1, .design_text_left h2, .design_text_right h2
		{
		font-size: 0.85em;	
		font-size: 4vw;
		font-size: calc(2.5vw + 1vmin);			
		display: table;	
		}
		
	.page_item
		{
		padding: 0;
		margin: 0;		
		}
				
	.design_heading	
		{
		height: 1vh;
		}	

	.design_heading	h1
		{
		margin: 5% 5% 0 5%;
		line-height: 1;
		}
		
	.design_heading	hr
		{
		display: none;
		}	
		
	.design_heading	p
		{
		line-height: 1;
		}	
		
	.contact-bg div.bg-overlay
		{
		opacity: 0.5;
		}	
		
	hr
		{
		width: 80%;
		}
	
 /*	.page-header 
		{
		  @supports (-webkit-appearance:none) 
		  {
			.os-android & 
			{
			  min-height: calc(100vh - 56px);
			}
		  }
		}*/
		
} 

 /* X-Small devices (phones up to 480px) */
@media screen and (max-height: 480px) and (max-width: 320px) 
{


}

@media (aspect-ratio: 16/9) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden 
	{
	display: none !important;
	}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden 
	{
	width: 1px;	
	height: 1px;
	margin: -1px;
	padding: 0;	
	border: 0;
	clip: rect(0, 0, 0, 0);
	overflow: hidden;
	position: absolute;
	white-space: nowrap; /* 1 */
	}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus
	{
	width: auto;
	height: auto;
	margin: 0;	
	clip: auto;
	overflow: visible;
	position: static;
	white-space: inherit;
	}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible
	{
	visibility: hidden;
	}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after 
	{
	content: " "; /* 1 */
	display: table; /* 2 */
	}

.clearfix:after 
	{
	clear: both;
	}