@charset "UTF-8";

/*Set font-family*/
body {
	font-family:  'Open Sans', Arial, Helvetica, sans-serif;
	}

/*-------------------------------------|
|--------------------------------------|
| Small Screen Mobile devices <320px  |
|     LegC & Smtphon Portrait	 	   |
|--------------------------------------|
|-------------------------------------*/
/* lcd one column vert- legC phonP size Grid Layout <320px wide follows*/

/*Default- Basic doc layout  portrait phone*/
		
/*Set graphic img srcsets to flex across devices to its full size and height*/
img {
	max-width: 100%;
	height: auto;
	}

/*-------------------------------|
|     Name & Set grid Areas      |
|-------------------------------*/

/*Name header grid areas*/
.masthead {
	grid-area: masthead;
	}

/*Name & Center tagline grid item across width of sm screen*/
.tagline {
	grid-area: tagline;
	margin-left: 40px;
	}

/*Name grid area for Nav container, set on layer 2*/	
.rtNav {
	grid-area: navtree;
	z-index: 2;
	margin: 0;
	}

/*Name grid area to hold Menu list items, set on layer 4*/
.vNav {
	grid-area: menu;
	z-index: 4;
	margin: 0;
	}
	
/*Name content grid area*/
.content {
	grid-area: content;
	margin-bottom: 15px;
	}

/*Name footer container and footer section grid areas, style credits for legibility on sm screen*/
.footer {              /*container*/
	grid-area: footer;
	width: 295px;
	}

.leftContain {
	grid-area: email;
	text-align: start;
	font-size: 10px;
	color: #06F;
	margin-top: 12px;
	}
a.info {text-decoration: none;}

.footerCredit {
	grid-area: copyright;
	width: 205px;
	margin-left: 5px;
	text-align: center;
	font-size: 10px;
	color:  #06F;
	margin-top: 6px;
	}
.rtContain {
	grid-area: more;
	align-self: center;
	}

/*-------------------------------------|
|     Layout Grid Area:    1           |
| Small Screen Mobile devices <320px  |
|     LegC & Smtphon Portrait	 	   |
|-------------------------------------*/

/*Reset margins, Display wrapper id in grid layout, one col, auto rows to accommodate changing content height-volume, layout gtas to sm screen*/
#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(85px, auto) minmax(50px, auto) auto 100px;
	grid-template-areas:
	"masthead"
	"tagline"
	"content"
	"footer";
	}
	
.rtNav {			/*container*/
	display: grid;
	grid-column: 1 / 4;
	grid-row: 3;
	grid-template-areas:
	"navtree";
	}
	
/*Display Nav menu in grid layout, w 2 equal ccs across sm screen*/
.vNav {				/*menu list items*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-row-start: 1;
	grid-template-areas:
	"menu menu";
	}	

/*Display footer's three sections in grid layout, in one col, starting after the fourth grid row item of the wrapper gtas, layout gtas to sm screen*/
.footer {           /*container*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 25px 75px;
	grid-row-start: 5;
	grid-template-areas:
	"email email"
	"copyright more";
	}

/*------------------------------|
|-------------------------------|
|        Tweaks-                |
|     Align on Mobile           |
|-------------------------------|
|------------------------------*/

@media screen and (min-width: 320px) and (max-height: 480px) {    /*portrait phone 4*/
	/*Tweak tagline top left; tweak footer and credits width on portrait phones*/	

.tagline {
	margin-left: 40px;
	}

.footer {
	width: 295px;
	}
.leftContain {margin-top: 12px; font-size: 10px;}
.footerCredit {
	width: 205px;
	margin-left: 5px;
	text-align: center;
	margin-top: 6px;
	font-size: 10px;
	}
.rtContain {
	align-self: center;
	}	
}


@media screen and (min-width: 320px) and (min-height: 481px) and (max-height: 568px) {     /*portrait phone 5*/
	/*Tweak tagline position, footer and credits width on portrait phones*/
.tagline {
	margin-left: 40px;
	}
	
.footer {
	width: 295px;
	}
.leftContain {font-size: 10px; margin-top: 12px;}
.footerCredit {
	width: 205px;
	margin-left: 5px;
	margin-top: 6px;
	font-size: 10px;
	}
.rtContain {
	align-self: center;
	}	
}

@media screen and (min-width: 375px) and (min-height: 569px) and (max-height: 667px) {   /*portrait phone 6-7-8*/
	/*Tweak tagline position, footer and credits width on portrait phones*/
.tagline {
	margin-left: 65px;
	}
.footer {
	width: 330px;
	margin-left: 15px;
	}
.leftContain {font-size: 10px; margin-top: 12px;}
.footerCredit {
	width: 225px;
	margin-top: 6px;
	}	
.rtContain {
	align-self: center;
	}
}

@media screen and (min-width: 414px) and (min-height: 668px) and (max-height: 896px) {     /*portrait phone 8 plus, phone 11 */
	/*Tweak tagline position, footer and credits width on portrait phones*/
.tagline {
	margin-left: 80px;
	}
.footer {
	width: 365px;
	margin-left: 15px;
	}	
.leftContain {margin-top: 12px;}
.footerCredit {
	width: 250px;
	margin-top: 6px;	
}
.rtContain {
	align-self: center;
	}
}

@media screen and (min-width: 375px) and (min-height: 737px) and (max-height: 812px) {   /*portrait phone 10*/
	/*Tweak tagline position, footer and credits width on portrait phones*/
.tagline {
	margin-left: 60px;
	}
	
.footer {
	width: 330px;
	margin-left: 15px;
	}
.leftContain {margin-top: 12px;}
.footerCredit {
	width: 225px;
	margin-top: 6px;	
	}
.rtContain {
	align-self: center;
	}
}


@media screen and (min-width: 360px) and (min-height: 780px) and (max-height: 926px) {   /*portrait phone 12 */
	/*Tweak tagline position, footer and credits width on portrait phones*/
.tagline {
	margin-left: 60px;
	}
	
.footer {
	width: 330px;
	margin-left: 15px;
	}
.leftContain {margin-top: 12px;}
.footerCredit {
	width: 225px;
	margin-top: 6px;	
	}
.rtContain {
	align-self: center;
	}
}


@media screen and (min-width: 428px) and (min-height: 926px) {
.footer {width: 350px;}
.footerCredit {width: 230px;}
}

/*---------------------------|
|----------------------------|
|	  Mobile devices         |
|   LegC & Smtphone Land   	 |
|----------------------------|
|---------------------------*/
/* one column grid layout for SmtPhon or LegCphon Landscape follows; Nav container is now 500px w three column buttons*/

@media screen and (max-width: 833px) and (min-width: 415px) and (max-height: 414px) {	/*landscape phone*/

/*-------------------------------|
|     Name & Set grid Areas      |
|-------------------------------*/
	
.tagline {
	grid-area: tagline;
	}
	
/*Name grid area for Nav container, create bottom margin to add white space prior to footer, set on layer 2*/
.rtNav {
	grid-area: navtree;
	z-index: 2;
	}

/*Name grid area to hold Menu list items, set on layer 4*/
.vNav {
	grid-area: menu;
	z-index: 4;
	}
		
/*Name content grid area*/
.content {
	grid-area: content;
	margin-bottom: 15px;
	}

/*Name footer container and footer section grid areas, style credits for legibility on sm screen*/
.footer {       /*container*/
	grid-area: footer;
	}

.leftContain {
	grid-area: email;
	text-align: start;
	font-size: 10px;
	color: #06F;
	margin-top: 12px;
	}
.footerCredit {
	grid-area: copyright;
	font-size: 10px;
	text-align: center;
	color:  #06F;
	margin-top: 6px;	
	}	
.rtContain {
	grid-area: more;
	align-self: center;
	}

/*---------------------------|
|     Layout Grid Area:   2  |
|	  Mobile devices         |
|    LegC & Smtphon Land   	 |
|---------------------------*/

/*Reset margins, Display wrapper id in grid layout, one col, auto rows to accommodate changing content height-volume, layout gtas to sm screen landscape*/

#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(75px, auto) minmax(50px, auto) auto 100px;
	grid-template-areas:
	"masthead"
	"tagline"
	"content"
	"footer";
	}
	
.rtNav {			/*container*/
	display: grid;
	grid-column: 1 / 4;
	grid-template-rows: auto;
	grid-template-areas:
	"navtree";
	}
	
/*Display Nav menu in grid layout, w 2 equal ccs across sm screen*/
.vNav {				/*menu list items*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-row-start: 1;
	grid-template-areas:
	"menu menu";
	}		

/*Display footer's three sections in grid layout, in one col, starting after the fourth grid row item of the wrapper gtas, layout gtas to sm screen*/
.footer {           /*container*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-row: 5;
	grid-template-areas:
	"email email"
	"copyright more";
	}
}

/*------------------------------|
|-------------------------------|
|        Tweaks-                |
|    Landscape Mobile           |
|-------------------------------|
|------------------------------*/

@media screen and (max-width: 480px) and (min-width: 415px) and (max-height: 320px) {    /*landscape phone 4*/
	/*Tweak tagline position, footer and credits width on landscape phones*/
.masthead {margin-left: 25px;}
.tagline {
	margin-left: 140px;
	margin-top: -5px;
	}

.footer {
	width: 430px;
	margin-left: 15px;
	}
.leftContain {
	text-align: start;
	font-size: 10px;
	color: #06F;
	margin-top: 12px;
	}
.footerCredit {
	width: 300px;
	font-size: 10px;
	text-align: center;
	margin-top: 6px;	
	}
.rtContain {
	align-self: center;
	}	
}

@media screen and (max-width: 568px) and (min-width: 481px) and (max-height: 320px) {     /*landscape phone 5*/
	/*Tweak tagline position, footer and credits width on landscape phones*/
.masthead {margin-left: 50px;}
.tagline {
	margin-left: 170px;
	margin-top: -5px;
	}
	
.footer {
	width: 510px;
	margin-left: 20px;
	}
.leftContain {margin-top: 12px;}
.footerCredit {
	width: 370px;
	margin-top: 6px;
	}
.rtContain {
	align-self: center;
	}	
}

@media screen and (max-width: 667px) and (min-width: 569px) and (max-height: 375px) {     /*landscape phone 6-7-8*/
	/*Tweak tagline position, footer and credits on landscape phone 6-7-8*/
.masthead {margin-left: 75px;}
.tagline {
	margin-left: 220px;
	margin-top: -5px;
	}
	
.footer {
	width: 600px;
	margin-left: 20px;
	}
.leftContain {margin-top: 12px;}
.footerCredit {
	width: 460px;
	margin-top: 6px;
	text-align: center;
	}	
.rtContain {
	align-self: center;
	}
}

@media screen and (max-width: 740px) and (min-width: 668px) and (max-height: 414px) {	/*landscape phone 8 plus*/
	/*Tweak tagline position, footer and credits on landscape phone 8 plus*/

.masthead {margin-left: 75px;}
.tagline {
	margin-left: 230px;
	margin-top: -10px;
	}
		
.footer {
	width: 665px;
	margin-left: 20px;
	}
.leftContain {margin-top: 12px;}
.footerCredit {
	width: 525px;
	margin-top: 6px;
	}
.rtContain {
	align-self: center;
	}
}

@media screen and (max-width: 833px) and (min-width: 741px) and (max-height: 375px) {   /*landscape iPhone 10*/
	/*Tweak masthead tagline positions, footer and credits on landscape phone 10*/
.masthead {margin-left: 50px;}
.tagline {
	margin-top: -10px;
	margin-left: 230px;
	}	

.footer {
	width: 91vw;
	margin-left:  30px;
	}
.leftContain {
	text-align: start;
	font-size: 10px;
	color: #06F;
	margin-top: 12px;
	}
.footerCredit {
	font-size: 10px;
	color: #06F;
	text-align: center;
	margin-top: 6px;
	width: calc(91vw - 120px);
	}
.rtContain {
	align-self: center;
	}
}


@media screen and (max-width: 896px) and (min-width: 834px) and (max-height: 414px) {  /*landscape iphone 11 */
	/*Tweak masthead tagline positions, footer and credits on landscape phone 11*/
.masthead {margin-left: 50px;}
.tagline {
	margin-top: -15px;
	margin-left: 240px;
	}	

.footer {
	width: 91vw;
	margin-left:  30px;
	}
.leftContain {
	text-align: start;
	font-size: 10px;
	color: #06F;
	margin-top: 12px;
	}
.footerCredit {
	font-size: 10px;
	color: #06F;
	text-align: center;
	margin-top: 6px;
	width: calc(91vw - 120px);
	}
.rtContain {
	align-self: center;
	}
}


@media screen and (min-width: 926px) and (min-height: 428px) {   /*landscape iphone 12 */
	/*Tweak masthead, tagline and footer and credits on landscape phone 12*/
.masthead {margin-left: 50px;}
.tagline {
	margin-top: -15px;
	margin-left: 240px;
	}	

.footer {
	width: 91vw;
	margin-left:  30px;
	}
.leftContain {
	text-align: start;
	font-size: 10px;
	color: #06F;
	margin-top: 12px;
	}
.footerCredit {
	font-size: 10px;
	color: #06F;
	text-align: center;
	margin-top: 6px;
	width: calc(91vw - 120px);
	}
.rtContain {
	align-self: center;
	}
}

/*---------------------------|
|----------------------------|
|     Medium Screen		     |
|   iPad Mini and iPad       |
|      Portrait              |
|----------------------------|
|---------------------------*/
/* one and half to two column layout for Medium Screen Pad Portrait*/

@media screen and (max-width: 833px) and (min-width: 768px) and (min-height: 415px) and (max-height: 1180px) {	/*portrait tablets*/

/*Set graphic img srcsets to flex across devices to its full size and height*/
img {
	max-width: 100%;
	height: auto;
	}

/*-------------------------------|
|     Name & Set grid Areas      |
|-------------------------------*/

/*Name header grid areas*/
.masthead {
	grid-area: masthead;
	margin-top: 15px;
	}

/*Name & Center tagline grid item across width of sm screen*/
.tagline {
	grid-area: tagline;
	margin-top: -10px;
	margin-left: 230px;
	}

/*Name grid area for Nav container, create bottom margin to add white space prior to footer, set on layer 2*/
.rtNav {
	grid-area: navtree;
	margin-top: 75px;
	width: 250px;
	z-index: 2;
	}

.rtNav > span {
	width: 200px;
	}

/*Name grid area to hold Menu list items, set on layer 4*/
.vNav {
	grid-area: menu;
	width: 480px;
	z-index: 4;
	}
		
/*Name content grid area*/
.content {
	grid-area: content;
	}

/*Name footer container and footer section grid areas, style credits for legibility on pad tablet*/
.footer {              /*container*/
	grid-area: footer;
	width: 90%;
	margin-left: 25px;
	}

.leftContain {
	grid-area: email;
	text-align: start;
	padding-left: 20px;
	font-size: 10px;
	color: #06F;
	margin-top: 12px;
	}
.footerCredit {
	grid-area: copyright;
	width: calc(88vw - 140px);
	font-size: 10px;
	text-align: center;
	color:  #06F;
	margin-top: 6px;
	}
.rtContain {
	grid-area: more;
	align-self: center;
	}

/*---------------------------|
|     Layout grid Area:   3  |
|     Medium Screen		     |
|   iPad Mini and iPad       |
|      Portrait              |
|---------------------------*/

#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(175px, auto) minmax(45px, auto) auto auto 100px;
	grid-template-areas:
	"masthead ."
	"tagline ."
	"content navtree"
	"content navtree"
	"footer footer";
	}
	
.rtNav {			/*container*/
	display: grid;
	grid-column: 1 / 4;
	grid-row-start: 3;
	grid-template-areas:
	"navtree";
	}
	
/*Display Nav menu in grid layout, w 2 equal ccs across med screen*/
.vNav {				/*menu list items*/
	display: grid;
	grid-column-start: 3;
	grid-row-start: 1;
	grid-template-areas:
	"menu menu";
	}		

.footer {       /*container*/
	display: grid;
	grid-column: 1 / 3;
	grid-row: 5;
	grid-template-areas:
	   "email email"
	   "copyright more";
	}
}
	
/*------------------------------|
|-------------------------------|
|        Smaller Desktop        |
|           Screens             |
|-------------------------------|
|------------------------------*/

/*smaller desktop screens*/
@media screen and (max-width: 833px) and (min-width: 799px) and (min-height: 736px) {	/*sm desktops*/

/*Set graphic img srcsets to flex across devices to its full size and height*/
img {
	max-width: 100%;
	height: auto;
	}

/*-------------------------------|
|     Name & Set grid Areas      |
|-------------------------------*/

/*Name header grid areas*/
.masthead {
	grid-area: masthead;
	margin-left: 50px;
	}

/*Name & Center tagline grid item across width of sm screen*/
.tagline {
	grid-area: tagline;
	margin-top: -5px;
	margin-left: 280px;
	}

/*Name grid area for Nav container, set on layer 4*/
.vNav {
	position: relative;
	left: 190px;
	grid-area: menu;
	width: 250px;
	z-index: 4;
	}
	
/*Name content grid area*/
.content {
	grid-area: content;
	}

/*Name footer container and footer section grid areas, style credits for legibility on pad tablet*/
.footer {              /*container*/
	grid-area: footer;
	width: 90%;
	margin-left: 25px;
	}

.leftContain {
	grid-area: email;
	text-align: start;
	padding-left: 20px;
	font-size: 10px;
	color: #06F;
	}
.footerCredit {
	grid-area: copyright;
	width: calc(88vw - 140px);
	font-size: 10px;
	text-align: center;
	color:  #06F;
	}
.rtContain {
	grid-area: more;
	align-self: center;
	}

/*---------------------------|
|     Layout grid Area:  4   |
|     smaller Desktop        |
|         Screens            |
|---------------------------*/

#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(175px, auto) minmax(50px, auto) auto auto 100px;
	grid-template-areas:
	"masthead ."
	"tagline ."
	"content navtree"
	"content navtree"
	"footer footer";
	}
	
.rtNav {			/*container*/
	display: grid;
	grid-column: 1 / 4;
	grid-row-start: 3;
	grid-template-areas:
	"navtree";
	}
	
/*Display Nav menu in grid layout, w 2 equal ccs across med screen*/
.vNav {				/*menu list items*/
	display: grid;
	grid-column-start: 3;
	grid-row-start: 1;
	grid-template-areas:
	"menu menu";
	}		

.footer {       /*container*/
	display: grid;
	grid-column: 1 / 3;
	grid-row: 5;
	grid-template-areas:
	   "email email"
	   "copyright more";
	}
}


/*------------------------------|
|-------------------------------|
|        iPad Pro 10in          |
|      Portrait Screens         |
|-------------------------------|
|------------------------------*/

/*iPad Pro 10 inch Portrait screens*/
@media screen and (min-width: 834px) and (min-height: 1112px) {	  /*portrait tablet ten inch pro*/
	/*Set graphic img srcsets to flex across devices to its full size and height*/
img {
	max-width: 100%;
	height: auto;
	}

/*-------------------------------|
|     Name & Set grid Areas      |
|-------------------------------*/

/*Tweak footer width*/	
/*Name header grid areas*/
.masthead {
	grid-area: masthead;
	margin-top: 75px;
	margin-left: 55px;
	}

.tagline {
	grid-area: tagline;
	/*margin-top: 0;
	margin-left:  270px;
	width: 430px;*/
	}

.rtNav {
	grid-area: navtree;
	margin-top: 75px;
	width: 250px;
	z-index: 2;
	}
	
/*Name grid area for Nav container, set on layer 4*/
.vNav {
	position: relative;
	left: 190px;
	grid-area: menu;
	width: 250px;
	z-index: 4;
	}
		
.content {
	grid-area: content;
	}

.footer {              /*container*/
	grid-area: footer;
	width: 90%;
	margin-left: 20px;
	}

.leftContain {
	grid-area: email;
	text-align: start;
	padding-left: 20px;
	font-size: 10px;
	color: #06F;
	margin-top: 0;
	}
.footerCredit {
	grid-area: copyright;
	width: calc(88vw - 140px);
	font-size: 10px;
	text-align: center;
	color:  #06F;
	}
.rtContain {
	grid-area: more;
	align-self: center;
	}
	
/*---------------------------|
|     Layout grid Area:  5   |
|        iPad Pro 10in       |
|      Portrait Screens      |
|---------------------------*/

#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(175px, auto) minmax(50px, auto) auto auto 100px;
	grid-template-areas:
	"masthead ."
	"tagline ."
	"content navtree"
	"content navtree"
	"footer footer";
	}
	
.rtNav {			/*container*/
	display: grid;
	grid-column: 1 / 4;
	grid-row-start: 3;
	grid-template-areas:
	"navtree";
	}
	
/*Display Nav menu in grid layout, w 2 equal ccs across med screen*/
.vNav {				/*menu list items*/
	display: grid;
	grid-column-start: 3;
	grid-row-start: 1;
	grid-template-areas:
	"menu menu";
	}		

.footer {       /*container*/
	display: grid;
	grid-column: 1 / 3;
	grid-row: 5;
	grid-template-areas:
	   "email email"
	   "copyright more";
	}
}


/*---------------------------|
|----------------------------|
|     Laptop Desktop         |
|     and Pad Landscape      |
|      Generic Tweaks        |
|----------------------------|
|---------------------------*/

/* three column 5fr layout for desktop and pad Landscape */
@media screen and (max-width: 1023px) and (min-width: 835px) and (min-height: 720px) {	/*landscape tablet, desktops*/

/*Set graphic img srcsets to flex across devices to its full size and height*/
img {
	max-width: 100%;
	height: auto;
	}

/*-------------------------------|
|     Name & Set grid Areas      |
|-------------------------------*/

/*Name header grid areas*/
.masthead {
	grid-area: masthead;
	margin-left: 50px;
	margin-top: 50px;
	}

/*Name & Center tagline grid item across width of sm screen*/
.tagline {
	grid-area: tagline;
	margin-top: -20px;
	margin-left: 75px;
	}

/*Name grid area for Nav container, set on layer 4*/
.vNav {
	position: relative;
	left: 245px;
	grid-area: menu;
	width: 250px;
	z-index: 4;
	}		
	
/*Name content grid area*/
.content {
	grid-area: content;
	}

/*Name footer container and footer section grid areas, style credits for legibility on pad tablet*/
.footer {              /*container*/
	grid-area: footer;
	width: 90%;
	margin-left: 20px;
	}

.leftContain {
	grid-area: email;
	text-align: start;
	padding-left: 20px;
	font-size: 12px;
	color: #06F;
	margin-top: 0;
	}
.footerCredit {
	grid-area: copyright;
	width: calc(90vw - 145px);
	font-size: 12px;
	text-align: center;
	color:  #06F;
	}
.rtContain {
	grid-area: more;
	align-self: center;
	}

/*---------------------------|
|     Layout grid Area:  6   |
|     Laptop Desktop         |
|     and Pad Landscape      |
|      Generic Tweaks        |
|---------------------------*/

#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: minmax(120px, 150px) minmax(55px, auto) auto auto 100px;
	grid-template-areas: 
	"masthead masthead masthead . ."
	". tagline tagline tagline menu"
	"content content content content menu"
	"content content content content menu"
	"footer footer footer footer footer";
	}

/*Display Nav menu in grid layout, w one ccs across lg screen*/
.vNav {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;	
	grid-template-areas:
	"menu";
	}


/*stops fragmented dot menu list
.slSectn .rtNav.About, .rtNav.Prod, .rtNav.Purch, .rtNav.Collab, .rtNav.Lic {
	margin: 0;
	}*/
	
ul.vNav.About {
	margin-top: 280px;
	}

.footer {     /*container*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 25px 75px;
	grid-template-areas:
	   "email email"
	   "copyright more";
	}		
}



/*---------------------------|
|----------------------------|
|      iPad Mini and         |
|      iPad Landscape        |
|          Screens           |
|----------------------------|
|---------------------------*/

/* three column 5fr layout for desktop and pad Landscape */
@media screen and (min-width: 1024px) and (orientation: landscape), screen and (max-width: 1180px) and (min-width: 1025px) and (min-height: 769px) and (max-height: 1365px) and (orientation: landscape), screen and (max-width: 1180px) and (min-width: 1025px) and (min-height: 769px) and (max-height: 1365px) and (orientation: portrait) {	/*landscape iPad mini and iPad screens*/

/*Set graphic img srcsets to flex across devices to its full size and height*/
img {
	max-width: 100%;
	height: auto;
	}

/*-------------------------------|
|     Name & Set grid Areas      |
|-------------------------------*/

/*Name header grid areas*/
.masthead {
	grid-area: masthead;
	margin-left: 50px;
	margin-top: 15px;
	}

/*Name & Center tagline grid item across width of sm screen*/
.tagline {
	grid-area: tagline;
	margin-top: -15px;
	margin-left: 80px;
	}

/*Name grid area for Nav container, set on layer 4*/
.vNav {
	position: relative;
	left: 210px;
	grid-area: menu;
	width: 250px;
	z-index: 4;
	}

/*Name content grid area*/
.content {
	grid-area: content;
	}

/*Name footer container and footer section grid areas, style credits for legibility on pad tablet*/
.footer {              /*container*/
	grid-area: footer;
	width: 90%;
	margin-left: 20px;
	}

.leftContain {
	grid-area: email;
	text-align: start;
	padding-left: 20px;
	font-size: 12px;
	color: #06F;
	margin-top: 0;
	}
.footerCredit {
	grid-area: copyright;
	width: calc(88vw - 140px);
	font-size: 12px;
	text-align: center;
	color:  #06F;
	}
.rtContain {
	grid-area: more;
	align-self: center;
	}

/*---------------------------|
|     Layout grid Area:  8   |
|      iPad Mini and         |
|      iPad Landscape        |
|          Screens           |
|---------------------------*/

#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: minmax(150px, 150px) minmax(55px, 55px) minmax(150px, auto) minmax(150px, auto) 100px;
	grid-template-areas: 
	"masthead masthead masthead . ."
	". tagline tagline tagline menu"
	"content content content content menu"
	"content content content content menu"
	"footer footer footer footer footer";
	}
	
/*Display Nav menu in grid layout, w one ccs across lg screen*/
.vNav {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;	
	grid-template-areas:
	"menu";
	}

/*stops fragmented dot menu list*/
.slSectn .rtNav.About, .rtNav.Prod, .rtNav.Purch, .rtNav.Collab, .rtNav.Lic {
	margin: 0;
	}
	
.footer {     /*container*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 25px 75px;
	grid-template-areas:
	   "email email"
	   "copyright more";
	}		
}


@media screen and (min-width: 1024px) and (max-height: 640px) {
.footer {
	width: 92%;
	}

.footerCredit {
	width: calc(92vw - 155px);
	
	}
}

/*---------------------------|
|----------------------------|
|      Pro 12 inch           |
|       Portrait             |
|        Screens             |
|----------------------------|
|---------------------------*/

/* three column 5fr layout for desktop and pad Landscape */
@media screen and (max-width: 1024px) and (min-width: 1024px) and (min-height: 1366px) and (max-height: 1366px) {	/*portrait Pro 12inch*/

/*Set graphic img srcsets to flex across devices to its full size and height*/
img {
	max-width: 100%;
	height: auto;
	}

/*-------------------------------|
|     Name & Set grid Areas      |
|-------------------------------*/

/*Name header grid areas*/
.masthead {
	grid-area: masthead;
	margin-left: 75px;
	margin-top: 60px;
	}

/*Name & Center tagline grid item across width of sm screen*/
.tagline {
	grid-area: tagline;
	margin-top: -10px;
	margin-left: 100px;
	}
	
/*Name grid area for Nav container, set on layer 4*/
.vNav {
	position: relative;
	left: 185px;
	grid-area: menu;
	width: 225px;
	z-index: 4;
	}
	
/*Name content grid area*/
.content {
	grid-area: content;
	}
	
/*Name footer container and footer section grid areas, style credits for legibility on pad tablet*/
.footer {              /*container*/
	grid-area: footer;
	width: 90%;
	}

.leftContain {
	grid-area: email;
	text-align: start;
	padding-left: 20px;
	font-size: 12px;
	color: #06F;
	}
.footerCredit {
	grid-area: copyright;
	width: calc(88vw - 140px);
	font-size: 12px;
	text-align: center;
	color:  #06F;
	}
.rtContain {
	grid-area: more;
	align-self: center;
	}


/*---------------------------|
|     Layout grid Area:  7   |
|      Pro 12 inch           |
|       Portrait             |
|        Screens             |
|---------------------------*/
	
#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: minmax(100px, 150px) minmax(45px, 50px) minmax(150px, auto) minmax(150px, auto) 100px;
	grid-template-areas: 
	"masthead masthead masthead . ."
	". tagline tagline tagline menu"
	"content content content content menu"
	"content content content content menu"
	"footer footer footer footer footer";
	}
	
/*Display Nav menu in grid layout, w one ccs across lg screen*/
.vNav {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;	
	grid-template-areas:
	"menu";
	}

/*stops fragmented dot menu list*/
.slSectn .rtNav.About, .rtNav.Prod, .rtNav.Purch, .rtNav.Collab, .rtNav.Lic {
	margin: 0;
	}

ul.vNav.About {
	margin-top: 380px;
	}
	
.footer {     /*container*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 25px 75px;
	grid-template-areas:
	   "email email"
	   "copyright more";
	}	
}


/*---------------------------|
|----------------------------|
|      Pro 10 inch           |
|       Landscape            |
|        Screens             |
|----------------------------|
|---------------------------*/

/* three column 5fr layout for desktop and pad Landscape */
@media screen and (max-width: 1242px) and (min-width: 1112px) and (min-height: 834px) {	/*landscape Pro 10inch*/

/*Set graphic img srcsets to flex across devices to its full size and height*/
img {
	max-width: 100%;
	height: auto;
	}

/*-------------------------------|
|     Name & Set grid Areas      |
|-------------------------------*/

/*Name header grid areas*/
.masthead {
	grid-area: masthead;
	margin-top: 25px;
	margin-left: 70px;
	}

/*Name & Center tagline grid item across width of sm screen*/
.tagline {
	grid-area: tagline;
	margin-top: -15px;
	margin-left: 105px;
	}
	
/*Name grid area for Nav container, set on layer 4*/
.vNav {
	position: relative;
	left: 230px;
	grid-area: menu;
	width: 225px;
	z-index: 4;
	}
	
/*Name content grid area*/
.content {
	grid-area: content;
	}
	
/*Name footer container and footer section grid areas, style credits for legibility on pad tablet*/
.footer {              /*container*/
	grid-area: footer;
	width: 90%;
	margin-left: 20px;
	}

.leftContain {
	grid-area: email;
	text-align: start;
	padding-left: 20px;
	font-size: 12px;
	color: #06F;
	margin-top: 0;
	}
.footerCredit {
	grid-area: copyright;
	width: calc(88vw - 140px);
	font-size: 12px;
	text-align: center;
	color:  #06F;
	}
.rtContain {
	grid-area: more;
	align-self: center;
	}

/*---------------------------|
|    Layout grid Area:   9   |
|      Pro 10 inch           |
|       Landscape            |
|        Screens             |
|---------------------------*/
	
#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: minmax(200px, auto) minmax(55px, auto) minmax(150px, auto) minmax(150px, auto) 100px;
	grid-template-areas: 
	"masthead masthead masthead . ."
	". tagline tagline tagline menu"
	"content content content content menu"
	"content content content content menu"
	"footer footer footer footer footer";
	}
	
/*Display Nav menu in grid layout, w one ccs across lg screen*/
.vNav {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;	
	grid-template-areas:
	"menu";
	}

/*stops fragmented dot menu list*/
.slSectn .rtNav.About, .rtNav.Prod, .rtNav.Purch, .rtNav.Collab, .rtNav.Lic {
	margin: 0;
	}
	
.footer {     /*container*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 25px 75px;
	grid-template-areas:
	   "email email"
	   "copyright more";
	}		
}


/*---------------------------|
|----------------------------|
|        Desktop             |
|        Screens             |
|----------------------------|
|---------------------------*/

/* three column 5fr layout for desktop and pad Landscape */
@media screen and (max-width: 1279px) and (min-width: 1243px) and (min-height: 720px) {  /*desktop*/

/*Set graphic img srcsets to flex across devices to its full size and height*/
img {
	max-width: 100%;
	height: auto;
	}

/*-------------------------------|
|     Name & Set grid Areas      |
|-------------------------------*/

/*Name header grid areas*/
.masthead {
	grid-area: masthead;
	margin-top: 10px;
	margin-left: 125px;
	}

/*Name & Center tagline grid item across width of lg screen*/
.tagline {
	grid-area: tagline;
	margin-left: 140px;
	margin-top: -10px;
	}	
	
/*Name grid area for Nav container, set on layer 4*/
.vNav {
	position: relative;
	left: 265px;
	grid-area: menu;
	width: 250px;
	z-index: 4;
	}

/*Name content grid area*/
.content {
	grid-area: content;
	}
	
/*Name footer container and footer section grid areas, style credits for legibility on pad tablet*/
.footer {              /*container*/
	grid-area: footer;
	width: 90%;
	margin-left: 25px;
	}

.leftContain {
	grid-area: email;
	text-align: start;
	padding-left: 20px;
	font-size: 12px;
	color: #06F;
	margin-top: 0;
	}
.footerCredit {
	grid-area: copyright;
	width: calc(88vw - 140px);
	font-size: 12px;
	text-align: center;
	color:  #06F;
	}
.rtContain {
	grid-area: more;
	align-self: center;
	}

/*---------------------------|
|    Layout grid Area:  10   |
|        Desktop             |
|        Screens             |
|---------------------------*/
	
#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: minmax(200px, auto) minmax(55px, auto) minmax(150px, auto) minmax(auto, 150px) 100px;
	grid-template-areas: 
	"masthead masthead masthead . ."
	". tagline tagline tagline menu"
	"content content content content menu"
	"content content content content menu"
	"footer footer footer footer footer";
	}
	
/*Display Nav menu in grid layout, w one ccs across lg screen*/
.vNav {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;	
	grid-template-areas:
	"menu";
	}

/*stops fragmented dot menu list*/
.slSectn .rtNav.About, .rtNav.Prod, .rtNav.Purch, .rtNav.Collab, .rtNav.Lic {
	margin: 0;
	}
	
ul.vNav.About {
	margin-top: 245px;
	}
	
.footer {     /*container*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 25px 75px;
	grid-template-areas:
	   "email email"
	   "copyright more";
	}	
}


/*---------------------------|
|----------------------------|
|   Larger Screens to        |
|     Presentation screens   |
|----------------------------|
|---------------------------*/

/* four or five column 7fr layout for lg desk and TVscreens */
@media screen and (max-width: 1365px) and (min-width: 1280px) and (min-height: 800px) {		/*Larger desktop screens*/

/*Set graphic img srcsets to flex across devices to its full size and height*/
img {
	max-width: 100%;
	height: auto;
	}

/*-------------------------------|
|     Name & Set grid Areas      |
|-------------------------------*/

/*Name header grid areas*/
.masthead {
	grid-area: masthead;
	width: 600px;
	margin-top: 20px;
	margin-left: 100px;
	}

/*Name & Center tagline grid item across width of sm screen*/
.tagline {
	grid-area: tagline;
	/*width: 530px;
	margin-top: -10px;
	margin-left: 100px;*/
	}

/*Name grid area for Nav container, set on layer 4*/
.vNav {
	position: relative;
	/*right: -300px;*/
	left: 285px;
	grid-area: menu;
	width: 250px;
	z-index: 4;
	}
	
/*Name content grid area*/
.content {
	grid-area: content;
	margin-bottom: 15px;
	}

/*Name footer container and footer section grid areas, style credits for legibility on pad tablet*/
.footer {              /*container*/
	grid-area: footer;
	width: 90%;
	margin-left: 25px;
	}

.leftContain {
	grid-area: email;
	text-align: start;
	padding-left: 20px;
	font-size: 12px;
	color: #06F;
	}
.footerCredit {
	grid-area: copyright;
	width: calc(88vw - 140px);
	font-size: 12px;
	text-align: center;
	color:  #06F;
	}
.rtContain {
	grid-area: more;
	align-self: center;
	}
	
/*---------------------------|
|     Layout grid Area: 11   |
|   Larger Screens to        |
|     Presentation screens   |
|---------------------------*/
#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: minmax(200px, auto) minmax(60px, auto) minmax(150px, auto) minmax(auto, 150px) 100px;
	grid-template-areas:
	"masthead masthead masthead  .  ."
	". tagline tagline tagline menu"
	"content content content content menu"
	"content content content content menu"
	"footer footer footer footer footer";
	}
			
/*Display Nav menu in grid layout, w one ccs across lg screen*/
.vNav {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
	"menu";
	}

/*stops fragmented dot menu list*/
.slSectn .rtNav.About, .rtNav.Prod, .rtNav.Purch, .rtNav.Collab, .rtNav.Lic {
	margin: 0;
	}
	
ul.vNav.About {
	margin-top: 370px;
	}
	
.footer {     /*container*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 25px 75px;
	grid-template-areas:
	   "email email"
	   "copyright more";
	}
}


/*---------------------------|
|----------------------------|
|       Pro 12 inch          |
|     Landscape screens      |
|----------------------------|
|---------------------------*/

/* four or five column 7fr layout for lg desk and TVscreens */
@media screen and (max-width: 1366px) and (min-width: 1366px) and (min-height: 1024px) and (max-height: 1024px) {		/*iPad Pro 12 inch Landscape screens*/

/*Set graphic img srcsets to flex across devices to its full size and height*/
img {
	max-width: 100%;
	height: auto;
	}

/*-------------------------------|
|     Name & Set grid Areas      |
|-------------------------------*/

/*Name header grid areas*/
.masthead {
	grid-area: masthead;
	width: 600px;
	margin-top: 25px;
	margin-left: 110px;
	}

/*Name & Center tagline grid item across width of sm screen*/
.tagline {
	grid-area: tagline;
	/*width: 530px;
	margin-top: -5px;
	margin-left: 95px;*/
	}
			
/*Name grid area for Nav container, set on layer 4*/
.vNav {
	position: relative;
	left: 285px;
	grid-area: menu;
	width: 250px;
	z-index: 4;
	}
	
/*Name content grid area*/
.content {
	grid-area: content;
	margin-bottom: 15px;
	}

/*Name footer container and footer section grid areas, style credits for legibility on pad tablet*/
.footer {              /*container*/
	grid-area: footer;
	width: 90%;
	margin-left: 25px;
	}

.leftContain {
	grid-area: email;
	text-align: start;
	padding-left: 20px;
	font-size: 12px;
	color: #06F;
	margin-top: 0;
	}
.footerCredit {
	grid-area: copyright;
	width: calc(88vw - 140px);
	font-size: 12px;
	text-align: center;
	color:  #06F;
	}
.rtContain {
	grid-area: more;
	align-self: center;
	}
	
/*---------------------------|
|    Layout grid Area: 12    |
|       Pro 12 inch          |
|     Landscape screens      |
|---------------------------*/

#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: minmax(275px, auto) minmax(60px, auto) minmax(150px, auto) minmax(auto, 150px) 100px;
	grid-template-areas:
	"masthead masthead masthead  .  ."
	". tagline tagline tagline menu"
	"content content content content menu"
	"content content content content menu"
	"footer footer footer footer footer";
	}
	
/*Display Nav menu in grid layout, w one ccs across lg screen*/
.vNav {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
	"menu";
	}

/*stops fragmented dot menu list*/
.slSectn .rtNav.About, .rtNav.Prod, .rtNav.Purch, .rtNav.Collab, .rtNav.Lic {
	margin: 0;
	}
	
ul.vNav.About {
	margin-top: 185px;
	}
	
.footer {     /*container*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 25px 75px;
	grid-template-areas:
	   "email email"
	   "copyright more";
	}
}


/*---------------------------|
|----------------------------|
|       Extra Large          |
|     Desktop screens        |
|----------------------------|
|---------------------------*/

/* four or five column 7fr layout for lg desk and TVscreens */
@media screen and (max-width: 1919px ) and (min-width: 1367px) and (min-height: 900px) {  /*Extra Large desktop screens*/

/*Set graphic img srcsets to flex across devices to its full size and height*/
img {
	max-width: 100%;
	height: auto;
	}

/*-------------------------------|
|     Name & Set grid Areas      |
|-------------------------------*/

/*Name header grid areas*/
.masthead {
	grid-area: masthead;
	width: 600px;
	margin-top: 35px;
	margin-left: 150px;
	}

/*Name & Center tagline grid item across width of sm screen*/
.tagline {
	grid-area: tagline;
	/*width: 530px;
	margin-top: 0px;
	margin-left: 135px;*/
	}

/*Name grid area for Nav container, set on layer 4*/
.vNav {
	position: relative;
	left: 275px;
	grid-area: menu;
	width: 250px;
	z-index: 4;
	}
	
/*Name content grid area*/
.content {
	grid-area: content;
	margin-bottom: 15px;
	}

/*Name footer container and footer section grid areas, style credits for legibility on pad tablet*/
.footer {              /*container*/
	grid-area: footer;
	width: 90%;
	margin-top: 20px;
	margin-left: 25px;
	}

.leftContain {
	grid-area: email;
	text-align: start;
	padding-left: 20px;
	font-size: 12px;
	color: #06F;
	margin-top: 0;
	}

.footerCredit {
	grid-area: copyright;
	width: calc(88vw - 140px);
	font-size: 12px;
	text-align: center;
	color:  #06F;
	}
.rtContain {
	grid-area: more;
	align-self: center;
	}
	
/*---------------------------|
|     Layout grid Area: 13   |
|     Presentation screens   |
|---------------------------*/

#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: minmax(250px, auto) minmax(70px, auto) minmax(150px, auto) minmax(auto, 150px) 100px;
	grid-template-areas: 
	"masthead masthead masthead . ."
	". tagline tagline tagline menu"
	"content content content content menu"
	"content content content content menu"
	"footer footer footer footer footer";
	}
	
/*Name grid area for Nav container, set on layer 4*/
.vNav {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
	"menu";
	}

/*stops fragmented dot menu list*/
.slSectn .rtNav.About, .rtNav.Prod, .rtNav.Purch, .rtNav.Collab, .rtNav.Lic {
	margin: 0;
	}
		
ul.vNav.About {
	margin-top: 400px;
	}
	
ul.vNav.About, ul.vNav.Prod, ul.vNav.Purch, ul.vNav.Collab, ul.vNav.Lic {
	margin-left: 70px;	
	}
	
.footer {     /*container*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 25px 75px;
	grid-template-areas:
	   "email email"
	   "copyright more";
	}
}


/*---------------------------|
|----------------------------|
|       Presentation         |
|    Desktop TV screens      |
|----------------------------|
|---------------------------*/

/* four or five column 7fr layout for lg desk and TVscreens */
@media screen and (min-width: 1920px) and (min-height: 900px) {		/*presentation tv screens*/

/*Set graphic img srcsets to flex across devices to its full size and height*/
img {
	max-width: 100%;
	height: auto;
	}

/*-------------------------------|
|     Name & Set grid Areas      |
|-------------------------------*/

/*Name header grid areas*/
.masthead {
	grid-area: masthead;
	width: 675px;
	margin-top: 55px;
	margin-left: 250px;
	}

/*Name & Center tagline grid item across width of sm screen*/
.tagline {
	grid-area: tagline;
	/*width: 580px;
	margin-left: 155px;
	margin-top: -10px;*/
	}
	
/*Name grid area for Nav container, set on layer 4*/
.vNav {
	position: relative;
	left: 440px;
	grid-area: menu;
	width: 250px;
	z-index: 4;
	}
	
/*Name content grid area*/
.content {
	grid-area: content;
	margin-bottom: 15px;
	}

/*Name footer container and footer section grid areas, style credits for legibility on pad tablet*/
.footer {              /*container*/
	grid-area: footer;
	width: 90%;
	margin-left: 25px;
	}
	
.leftContain {
	grid-area: email;
	text-align: start;
	padding-left: 20px;
	font-size: 14px;
	color: #06F;
	margin-top: 0;
	}
.footerCredit {
	grid-area: copyright;
	width: calc(88vw - 140px);
	font-size: 14px;
	text-align: center;
	color:  #06F;
	}
.rtContain {
	grid-area: more;
	align-self: center;
	}
	
/*---------------------------|
|     Layout grid Area: 14   |
|     Presentation screens   |
|---------------------------*/
#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: minmax(300px, auto) minmax(80px, auto) minmax(150px, auto) minmax(auto, 150px) 100px;
	grid-template-areas:
	"masthead masthead masthead  .  ."
	". tagline tagline tagline menu"
	"content content content content menu"
	"content content content content menu"
	"footer footer footer footer footer";
	}
	
.vNav {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
	"menu";
	}

/*stops fragmented dot menu list*/
.slSectn .rtNav.About, .rtNav.Prod, .rtNav.Purch, .rtNav.Collab, .rtNav.Lic {
	margin: 0;
	}
	
ul.vNav.About {
	margin-top: 400px;
	}
	
.footer {     /*container*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 25px 75px;
	grid-template-areas:
	   "email email"
	   "copyright more";
	}
}