:root {
  --black: rgb(0,0,0);/*white*/
  --white: rgb(255,255,255);/*white*/
  --whiteCoolest:rgb(227,222,224);/*whiteCoolest*/  
  --whiteDarkOuterPlanet:rgb(245,239,237); /* #F5EFED from https://coolors.co */  
  --grayLightOuterPlanet:rgb(148,141,152); /* #948D98 from https://coolors.co */  
  --grayDarkOuterPlanet:rgb(108,101,112); /* #948D98 from https://coolors.co */ 
  --textCharcoal:rgb(84,73,72);/* #544948 from https://coolors.co */
  --orangeOuterPlanet: rgb(251,98,9);/* #FB6209 from https://coolors.co */
  --blueOuterPlanet: rgb(115, 177, 255);/* #73B1FF from https://coolors.co */
  
  --greenOuterPlanet: rgb(175, 213, 170);/* #AFD5AA Iguana Green from https://coolors.co */
  --purpleOuterPlanet: rgb(159, 135, 175);/* #9F87AF from https://coolors.co */
    --grayBluePlanet: rgb(135, 137, 192);/*  #8789C0 from https://coolors.co */
    --softBrownOuterPlanet: rgb(178, 139, 132);/* #B28B84 from https://coolors.co */
    --softRedOuterPlanet: rgb(201, 93, 99);/* #C95D63 from https://coolors.co */
    --softGrayOuterPlanet: rgb(159, 154, 164);/* #9F9AA4 from https://coolors.co */
    --cyanOuterPlanet: rgb(69, 240, 223);/* #45F0DF from https://coolors.co */
}


/* Used to draw a line separator between items in a list view */
hr { 
	background-color: var(--white); 
	height: 1px; 
	border: 0; 
}

body {
 background-color: var(--white); 
 padding: 20px;
 font: 14px "Source Sans Pro", Helvetica, Arial, sans-serif;
}

#content {
	padding: 20px;
	padding-left: 80px;
	padding-right: 80px;
	
}

.centeredVideo{
    background: rgba(0, 0, 0, 0.0);
	display: block;
    margin-left: auto;
    margin-right: auto;
	margin-top: 0.0em;
	margin-bottom: 0.0em;  
	padding-top: 0px;
	padding-bottom: 0px;
  
    height: 100%;
	width: 80%; 
    /*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
}


.topHorNav{
	margin-top:1.2em;
	margin-bottom:1.2em;
	margin-right:1.0em;
	margin-left:1.0em;
	padding: 0;
	font-family: 'Actor', sans-serif;
	font-size: 1.2em;
	text-align:center;
}

.imageContainerLarge {
  	margin: 5px;
  	margin-top: 10px;
	margin-right: 10px;
	max-width: 100%;
}
.imageContainerLarge > img {
  width: 100%;
}

.centeredSmallest{
	display: block;
	margin-top: 0.0em;
    margin-left: auto;
    margin-right: auto;
    height: auto;
	width: 30%; 
    /*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
}

.centeredMedium{
	display: block;
	margin-top: 0.0em;
    margin-left: auto;
    margin-right: auto;
    height: auto;
	width: 50%; 
    /*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
}

.centeredLarge{
	display: block;
	margin-top: 0.0em;
    margin-left: auto;
    margin-right: auto;
    height: auto;
	width: 90%; 
    /*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
}

p {
	font-style: normal;
	font-size: 12px;
	line-height: 1.0;
	color: var(--textCharcoal);
	margin-bottom: 1em;
}


p.pageTitle{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 2.0em;
	margin-left: 0.0em;
	margin-right: 0.0em;
	padding-left: 0em;
	margin-bottom: 0.5em;
	padding-bottom: 0em;	
	line-height: 1.4em;
	color: var(--black);
	text-align: center;
	list-style-position: outside; /*Necessary to state explicitly for Internet Explorer 6 */
	/*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
}

/*PRIMARY PARAGRAPH STYLE  ************************************************ */
p.primary{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.2em;
	margin-left: 1.0em;
	margin-right: 1.0em;
	padding-left: 0em;
	margin-bottom: 0.5em;
	padding-bottom: 0em;	
	line-height: 1.4em;
	color: var(--textCharcoal);
	list-style-position: outside; /*Necessary to state explicitly for Internet Explorer 6 */
	/*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
}

p.primaryCentered{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.2em;
	margin-left: 1.0em;
	margin-right: 1.0em;
	padding-left: 0em;
	margin-bottom: 0.5em;
	padding-bottom: 0em;	
	line-height: 1.4em;
	color: var(--textCharcoal);
	text-align: center;
	list-style-position: outside; /*Necessary to state explicitly for Internet Explorer 6 */
	/*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
}

/* LINK STYLES  ************************************************ */

/*primary link styles-------------------------------------------*/
/* ORDER IS IMPORTANT: MUST BE link, then visited, then hover, then active */
.primary a:link{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.0em;
	margin-left: 0.0em;
	margin-right: 0.0em;
	padding-left: 0em;
	margin-bottom: 0.5em;
	padding-bottom: 0em;	
	line-height: 1.0em;
	color: var(--blueOuterPlanet);
	list-style-position: outside; /*Necessary to state explicitly for Internet Explorer 6 */
	/*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
}
.primary a:visited{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.0em;
	margin-left: 0.0em;
	margin-right: 0.0em;
	padding-left: 0em;
	margin-bottom: 0.5em;
	padding-bottom: 0em;	
	line-height: 1.0em;
	color: var(--grayLightOuterPlanet);
	list-style-position: outside; /*Necessary to state explicitly for Internet Explorer 6 */
	/*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
}
.primary a:hover{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.0em;
	margin-left: 0.0em;
	margin-right: 0.0em;
	padding-left: 0em;
	margin-bottom: 0.5em;
	padding-bottom: 0em;	
	line-height: 1.0em;
	color: var(--grayLightOuterPlanet);
	list-style-position: outside; /*Necessary to state explicitly for Internet Explorer 6 */
	/*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
}
.primary a:active{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.0em;
	margin-left: 0.0em;
	margin-right: 0.0em;
	padding-left: 0em;
	margin-bottom: 0.5em;
	padding-bottom: 0em;	
	line-height: 1.0em;
	color: var(--grayLightOuterPlanet);
	list-style-position: outside; /*Necessary to state explicitly for Internet Explorer 6 */
	/*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
}


/* LIST STYLES  ************************************************ */

/*primary Unordered/Bulleted List -------------------------------------------*/
ul.primary{
	font-size: 1.2em;
/* Firefox and Safari both set a default padding for lists while Internet
	   Explorer and Opera use a margin - so you need to specify both, 
	   particularly for the left margin. And note that the left margin needs to 
	   be at least the same as the paragraphs by which the list is preceded and followed.*/
	margin-left: 2.0em;
	margin-right: 1.0em;
	padding-left: 1.0em;
	margin-top: 0.0em;
	padding-top: 0.0em;
	line-height: 1.8em;
	list-style-position: outside; /*Necessary to state explicitly for Internet Explorer 6 */
	/*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
}


/*primary Ordered/Numbered List -------------------------------------------*/
ol.primary{
	font-size: 1.2em;
/* Firefox and Safari both set a default padding for lists while Internet
	   Explorer and Opera use a margin - so you need to specify both, 
	   particularly for the left margin. And note that the left margin needs to 
	   be at least the same as the paragraphs by which the list is preceded and followed.*/	
	margin-left: 2.0em;
	margin-right: 1.0em;
	padding-left: 1.0em;
	line-height: 1.5em;
	list-style-position: outside; /*Necessary to state explicitly for Internet Explorer 6 */
	/*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
}


em {
	font-style: italic;
}



.navButton{
	color: var(--blueOuterPlanet);
}
.navButtonSelected{
	color: var(--orangeOuterPlanet);
}

#pageHeaderA {
  	padding-left: 20px;
  	padding-right: 20px;
	background-color: var(--blueOuterPlanet);
    font-weight: normal;
	color: var(--white);
}

.pageHeaderA{	
 	font: 11px "Source Sans Pro", Helvetica, Arial, sans-serif;

	margin-top:9px;
	margin-bottom:0px;	
	font-size: 1.0em;
	line-height: 3.0em;	
	margin-left: 0px;

  	padding-top: 0px;
  	padding-bottom: 0px;
  	padding-left: 0px;
  	padding-right: 0px;
    font-weight: normal;
	color: var(--white);

}
	
#pageHeaderATitle{	
	margin-top:0px;
	margin-bottom:0px;	
	font-size: 1.4em;
	line-height: 3.0em;	
	margin-left: 0px;
  	padding-top: 2px;
  	padding-bottom: 2px;
  	padding-left: 0px;
  	padding-right: 2px;
    font-weight: normal;
	text-align: left;    	
	color: var(--white);
}

.signInOrOut{
 	font: 11px "Source Sans Pro", Helvetica, Arial, sans-serif;

	margin-top:9px;
	margin-bottom:0px;	
	font-size: 1.0em;
	line-height: 3.0em;	
	margin-left: 0px;

  	padding-top: 0px;
  	padding-bottom: 0px;
  	padding-left: 0px;
  	padding-right: 0px;
    font-weight: normal;
    text-align: right; 
	color: var(--white);
}

.loggedInEmailAddress{
 	font: 12px "Source Sans Pro", Helvetica, Arial, sans-serif;

	margin-top:4px;
	margin-bottom:0px;	
	font-size: 0.8em;
	line-height: 1.0em;	
	margin-left: 0px;

  	padding-top: 0px;
  	padding-bottom: 0px;
  	padding-left: 0px;
  	padding-right: 0px;
    font-weight: normal;
    text-align: right; 
	color: var(--white);
}


#pageHeaderControl {
	background-color: var(--white);
}


.pageHeaderLessEmphasis{	
	color: var(--whiteCoolest);

}



/* Styling for the hamburger */
.hamburger{	
	font-size: 2.0em;
	line-height: 2.1em;	  	
    font-weight: normal;
	text-align: left;    	
	color: var(--white);
	cursor:pointer;
}

/* Styling for the sidebar that appears */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;

	background-color: var(--white);
	color: var(--blueOuterPlanet);

    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

/* Styling for the links in the sidebar that appears */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16px;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Styling for the sidebar's close button */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 30px;
    margin-left: 50px;
}




/* SUMMARY SENTENCE STYLES  ************************************************ */

/*primaryFirstSentence -------------------------------------------------------*/
p.primaryFirstSentenceCenter{
	font-family: "Source Sans Pro", "Actor",Georgia,sans-serif;
	font-size: 1.5em;
	margin-top:0;
	margin-bottom:1.0em;
	margin-left:0;
	margin-right:0;
	line-height: 1.0em;
	color: var(--grayDarkOuterPlanet);
	/*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
	text-align: center;
}

p.primaryFirstSentenceLeft{
	font-family: "Source Sans Pro", "Actor",Georgia,sans-serif;
	font-size: 1.5em;
	margin-top:0;
	margin-bottom:1.0em;
	margin-left:0;
	margin-right:0;
	line-height: 1.0em;
	color: var(--grayDarkOuterPlanet);
	/*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
	text-align: left;
}

p.primaryFirstSentenceRight{
	font-family: "Source Sans Pro", "Actor",Georgia,sans-serif;
	font-size: 1.5em;
	margin-top:0;
	margin-bottom:1.0em;
	margin-left:0;
	margin-right:0;
	line-height: 1.0em;
	color: var(--grayDarkOuterPlanet);
	/*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
	text-align: right;
}

/*primaryLastSentence --------------------------------------------------------*/
p.primaryLastSentence{
	font-family:"Actor",Georgia,Serif;
	margin-top:0;
	margin-bottom:1.0em;
	margin-left:0;
	margin-right:0;
	font-size: 1.2em;
	line-height: 1.4em;
	color: rgb(40,40,40);/*newCharcoal*/			
	text-align: left;
}


/*primaryLastSentenceCentered -----------------------------------------------*/
p.primaryLastSentenceCentered{
	font-family:"Actor",Georgia,Serif;
	margin-top:0;
	margin-bottom:1.0em;
	margin-left:0;
	margin-right:0;
	font-size: 1.2em;
	line-height: 1.4em;
	color: rgb(40,40,40);/*newCharcoal*/			
	text-align: center;
}



/* Article List */
.articleListHeadline{
	margin-left:0px;
	padding-left:0px;
}

.articleListSectionTitle{
	width: 100%;
	padding: 0;
	padding-bottom: 10px;	
	margin: 0;
	font-family: "Actor",Georgia,sans-serif;
	font-size: 20px;
	line-height: 1.3;
	color: var(--purpleOuterPlanet);
}


.articleListItemTitle{
	width: 100%;
	padding: 0;
	padding-top: 10px;	
	margin: 0;
	font-family: "Source Sans Pro", "Actor",Georgia,sans-serif;
	font-size: 16px;
	line-height: 1.3;
	color: var(--blueOuterPlanet);
}
.articleListItemDetailsLine1{
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: "Source Sans Pro", "Actor",Georgia,sans-serif;
	font-size: 12px;
	line-height: 1.3;
	color: var(--textCharcoal);
}
articleListItemDetailsLine2{
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: "Source Sans Pro", "Actor",Georgia,sans-serif;
	font-size: 12px;
	line-height: 1.3;
	color: var(--textCharcoal);
}
.articleListItemDetailsLine3{
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: "Source Sans Pro", "Actor",Georgia,sans-serif;
	font-size: 12px;
	line-height: 1.8;
	color: var(--textCharcoal);
}
.tempTest{
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: Arial,sans-serif;
	font-size: 11px;
	line-height: 1.3;
	color: var(--grayLightOuterPlanet);
}
	
.headerLogoImage{
  	padding: 5px;
  	margin:5px;	
	margin-top: 0px;
	margin-bottom: 0px;	  	
	max-width:200px;	
		color: var(--grayLightOuterPlanet);

}

.headerLogoText{
  	padding: 5px;
  	margin:5px;	
	color: var(--orangeOuterPlanet);
	font-family: "Source Sans Pro", sans-serif;
	
}
	
	
.articleListThumb{
  	padding: 5px;
  	margin:5px;	
  	width: 100%;
	min-width:100px;  	
	max-width:100px;
	border: 1px solid  var(--eggYellow);
}



/* Article */
.articleTopNav{
	margin-bottom: 20px;
	border-bottom: 1px solid var(--grayLightOuterPlanet);
}

.pageTitle{
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: Arial,sans-serif;
	font-size: 30px;
	line-height: 1.3;
	color: var(--blueOuterPlanet);
}
.pageSummary{
	width: 100%;
	padding: 0;
	margin: 0;
	margin-bottom: 4px;
	font-family: Arial,sans-serif;
	font-size: 12px;
	line-height: 1.3;
	color: var(--textCharcoal);
}
.articleDateline{
	width: 100%;
	padding: 0;
	margin: 0;
	margin-bottom: 20px;

	font-family: Arial,sans-serif;
	font-size: 10px;
	line-height: 1.3;
	color: var(--blueOuterPlanet);
}


#header {
	padding: 20px;
	background-color: var(--blueOuterPlanet);
	color: var(--white);
	}
	
	
#footer {
	padding: 10px;
    background-color: var(--white); 
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;	
	line-height: 1.4em;
	color: var(--textCharcoal);
	font-family: Arial, 'Source Sans Pro', Helvetica, sans-serif;
	font-style: normal;
	font-size: 14px;
	line-height: 1.2;
	color: var(--textCharcoal);
	text-align: center;
	list-style-position: outside; /*Necessary to state explicitly for Internet Explorer 6 */
	/*border: 1px solid rgb(0, 255, 0);*//*For Testing Only*/
}

	
.onDarkBackground {
	color: var(--white);
}

.onDarkBackground a:visited{
	font-size: 0.9em;
	font-family: 'Actor', sans-serif;
	color: rgb(50,1,237);
	text-decoration: none;
}

	
	
/* ERROR PAGE STYLES  ************************************************ */

.pageTitleForErrorPage {
 	font: 20px "Source Sans Pro", Helvetica, Arial, sans-serif;
	font-style: normal;
	line-height: 1.7;
	color: var(--blueOuterPlanet);
}
.errorSummaryForErrorPage {
 	font: 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
	font-style: normal;
	line-height: 1.7;
	color: var(--blueOuterPlanet);
}
.errorDetailsForErrorPage {
 	font: 13px "Source Sans Pro", Helvetica, Arial, sans-serif;
	font-style: normal;
	line-height: 1.7;
	color: var(--textCharcoal);
}
.urlForErrorPage {
 	font: 11px "Source Sans Pro", Helvetica, Arial, sans-serif;
	font-style: normal;
	line-height: 1.2;
	color: var(--textCharcoal);
}

	
/* COMPANY NAME STYLES  ************************************************ */

.outerPlanetLabsCompanyName{
	color: var(--orangeOuterPlanet);
	font-weight: normal;
}



/* MATERIALIZE OVERRIDES *******************************************/
.searchFormContainer {
  	display: inline-block;
  	margin: 5px;
  	margin-top: 10px;
	margin-right: 10px;
  	padding: 10px;
  	border: 1px solid var(--textCharcoal);
}


/* for forms */
   .input-field label {
     color: var(--textCharcoal);
   }
   /* label focus color */
   .input-field input[type=text]:focus + label {
     color: var(--textCharcoal);
   }
   /* label underline focus color */
   .input-field input[type=text]:focus {
     border-bottom: 1px solid var(--whiteOuterPlanet);
     box-shadow: 0 1px 0 0 var(--textCharcoal);
   }
   /* valid color */
   .input-field input[type=text].valid {
     border-bottom: 1px solid var(--textCharcoal);
     box-shadow: 0 1px 0 0 var(--textCharcoal);
   }
   /* invalid color */
   .input-field input[type=text].invalid {
     border-bottom: 1px solid var(--textCharcoal);
     box-shadow: 0 1px 0 0 var(--textCharcoal);
   }
   /* icon prefix focus color */
   .input-field .prefix.active {
     color: var(--textCharcoal);
   }

   .submitButton{
  	display: inline-block;
  	margin: 5px;
  	margin-top: 30px;
	margin-right: 10px;
  	padding: 10px;
  	color: var(--grayLightOuterPlanet);
  }
   
   .submitButtonText{
   	color: var(--textCharcoal);
  	text-transform: lowercase;
	margin: 0px;
  	padding: 10px;
  }

::-webkit-input-placeholder {
   color: var(--whiteOuterPlanet);
}

:-moz-placeholder { /* Firefox 18- */
   color: var(--whiteOuterPlanet); 
}

::-moz-placeholder {  /* Firefox 19+ */
   color: var(--whiteOuterPlanet); 
}

:-ms-input-placeholder {  
   color: var(--whiteOuterPlanet);
}





/* MOBILE DEVICE STYLES  ************************************************ */

/*
Supports adding alternate CSS for small screen and width devices inside curly braces. By using the cascade we can overwrite any styles rules we set for desktop browsers earlier in our CSS. As long as this section comes last in your CSS it will overwrite the previous rules. So, to linearize our layout and use a smaller header graphic we add the following:
*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width: 500px) {
/* Styles */
	body {
 		padding: 10px;
	}
	#content {
		padding: 5px;
	}
	#pageHeaderATitle{	
		margin-left: 30px;
	}
	/*Affects the hamburger button*/
	.idvNavHeader {
		margin-right: 0px;
	}

}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

@media only screen 
and (max-width : 320px) {
/* Styles */
	body {
 		padding: 5px;
	}
	#content {
		padding: 0px;
	}
	/*Affects the hamburger button*/
	.idvNavHeader {
		margin-right: 0px;
	}

	#pageHeaderA {
		margin-left: 0px;
  		padding-left: 0px;
	}
	#headerLogo{
  		padding: 5px;
  		padding-left: 0px;  		
  		margin:5px;	
		margin-left: 0px;  		
		max-width:50px;
	}

	#pageHeaderATitle{	
		margin-left: 30px;
		font-size: 1.3em;
	}
	
	.articleListSectionTitle{
			margin-left: 5px;  		
	}
	.navButton{
		font-size: 10px;
	}
	.navButtonSelected{
		font-size: 10px;
	}

}