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

/*------------------------------------------|
|-------------------------------------------|
|  		     Products Page                  | 
|      2 by 2 reversible column display     |
|      draws products from database         |
|-------------------------------------------|
|------------------------------ ------------*/


/*-------------------------------|
|--------------------------------|
|    Pad device size 	 	     | 
|     Pad Mini and Pad           |
| 	 Portrait Grid layout	  	 |
|--------------------------------|
|------------------------------ */

@media screen and (max-width: 833px) and (min-width: 768px) and (min-height: 415px) and (max-height: 1180px) {	/*portrait tablet*/
#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(150px, 150px) minmax(40px, 40px) auto auto 100px;
	grid-template-areas: 
	"masthead ."
	"tagline ."
	"content navtree"
	"content navtree"
	"footer footer";
	}

.masthead {
	width: 475px;
	height: 95px;
	align-self: end;
	margin-left: 110px;
	}

.tagline {
	margin-top: 0;
	margin-left: 260px;
	}
	
.slMenu .Full {top: 260px;}
	
	/*Position content within screen*/
.content {
	margin: 0;
	grid-area: content; 
	width: 90vw;
	}

.content {
	border-image-source: url(../Images/GrnNeonLinePattern.png);
	border-image-repeat: stretch;
	border-image-slice: 6 0 0 0;
	border-image-width: 4px;
	}
	
.item1.text {
	height: auto;
	grid-area: pr1;	
	}

.item1.img {
	height: auto;
	grid-area: pri1;
	}
.item2.text {
	height: auto;
	grid-area: pr2;
	}

.item2.img {
	height: auto;
	grid-area: pri2;
	}
.adv {
	width: 320px;
	grid-area: pradv;
	align-self: center;
	}

.hdg {
	width: 320px;
	grid-area: prhdg;
	align-self: center;
	}

.adv h2, .hdg h2 {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 300;
	font-style: italic;
	margin: 8px 0 0 0;
	color: rgba(0,204,51,1);
	}

.item3.img {
	height: auto;
	grid-area: pri3;
	}
.item3.text {
	height: auto;
	grid-area: pr3;
	}

.item4.img {
	height: auto;
	grid-area: pri4;
	}
.item4.text {
	height: auto;
	grid-area: pr4;
	}

.text {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.6;
	text-align: left;
	padding-left: 10px;
	}

.content {
	display: grid;
	grid-template-columns: 1fr .33fr 1fr;
	grid-template-rows: auto 90px auto auto 90px auto;
	grid-template-areas:
	"pr1 pri1 ."
	". prhdg prhdg"
	"pr2 pri2 ."
	". pri3 pr3"
	"pradv pradv ."
	". pri4 pr4";
	}

.indent {
    display: block;
    width: 325px;
    margin: -20px 0 -10px 20px;
	}

.item1.text, .item2.text, .item3.text, .item4.text {
	width: 36vw;
	margin-top: 25px;
	}
.item1.text p {margin-top: 10px; padding-right: 5px; margin-left: 20px;}

.item2.text p {margin-top: 10px; padding-right: 5px; margin-left: 20px;}

.item3.rt .indent, .item4.rt .indent {width: 260px;}

.item3.text {margin-top: 20px;}
.item3.text p {margin-top: 0; margin-left: 0; padding-left: 10px;}

.item4.text img {width: 175px; margin-left: 15px;}
.item4.text p {margin-top: 15px; margin-left: 0; padding-left: 10px;}
	
.item1.img, .item2.img, .item3.img, .item4.img {
	width: 12vw;
	}
.item1.img {margin-top: 172px;}
.item2.img {margin-top: 152px;}
.item1.img .btnGallery, .item2.img .btnGallery {margin-left: 5px;}

.item3.img {margin-top: 164px;}
.item3.img p, .item4.img p {margin-left: 5px; font-size: 10px;}
.item4.img {margin-top: 140px;}
	
.item3.img .btnGallery, .item4.img .btnGallery {margin-left: 5px;}

.btnGallery {width: 105px; height: 45px; margin-bottom: 20px;}
#btn {display: inline-block; width: 115px; margin-top: -15px; margin-left: -20px;}
}

/*-------------------------------|
|--------------------------------|
|    Smaller Desktop 	 	     | 
| 	 Portrait Grid layout	  	 |
|--------------------------------|
|------------------------------ */

/*smaller desktop screens*/
@media screen and (max-width: 833px) and (min-width: 799px) and (min-height: 736px) {	/*sm desktops*/
#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(150px, 150px) minmax(40px, 40px) auto auto 100px;
	grid-template-areas: 
	"masthead ."
	"tagline ."
	"content navtree"
	"content navtree"
	"footer footer";
	}

.masthead {
	width: 475px;
	height: 95px;
	align-self: end;
	margin-left: 110px;
	}

.tagline {
	margin-top: 0;
	margin-left: 260px;
	}
	
.slMenu .Full {top: 260px;}

.content {
	margin: 0;
	grid-area: content;
	width: 90vw;
	}	
	
.hdg, .adv {
	width: 325px;
	}
	
.content {
	display: grid;
	grid-template-columns: 1fr .33fr 1fr;
	grid-template-rows: auto 90px auto auto 90px auto;
	grid-template-areas:
	"pr1 pri1 ."
	". prhdg prhdg"
	"pr2 pri2 ."
	". pri3 pr3"
	"pradv pradv ."
	". pri4 pr4";
	}

.indent {
    display: block;
    width: 325px;
    margin: -20px 0 -10px 20px;
	}
	
.item1.text, .item2.text, .item3.text, .item4.text {
	width: 36vw;
	margin-top: 25px;
	}
.item1.text p {margin-top: 10px; padding-right: 5px; margin-left: 20px;}
	
.item2.text p {margin-top: 10px; padding-right: 5px; margin-left: 20px;}

.item3.rt .indent, .item4.rt .indent {width: 250px;}

.item3.text img {margin-left: -20px;}
.item3.text p {margin-top: 0; margin-left: 10px; padding-left: 0;}

.item4.text img {width: 175px; margin-left: 15px;}
.item4.text p {margin-top: 15px; margin-left: 10px; padding-left: 0;}
	
.item1.img, .item2.img, .item3.img, .item4.img {
	width: 12vw;
	margin-top: 25px;
	}
.item1.img {margin-top: 176px;}
.item2.img {margin-top: 156px;}
.item1.img .btnGallery, .item2.img .btnGallery {margin-left: 5px;}

.item3.img {margin-top: 174px;}
.item3.img p, .item4.img p {margin-left: 5px; font-size: 10px;}
.item4.img {margin-top: 142px;}

.btnGallery {width: 115px; height: 45px; margin-bottom: 20px;}
#btn {display: inline-block; width: 125px; margin-top: -15px; margin-left: -20px;}
}

/*-------------------------------|
|--------------------------------|
|        Pro 10in  	 	         | 
| 	 Portrait Grid layout	  	 |
|--------------------------------|
|------------------------------ */

/*Pad Pro 10 in portrait screens*/
@media screen and (min-width: 834px) and (min-height: 1112px) {	  /*portrait 10inch tablet*/
	/*Tweak content height*/	
#wrapper {
	margin: 0 auto;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(220px, 220px) minmax(45px, 45px) auto minmax(150px, auto) 100px;
	grid-template-areas: 
	"masthead ."
	"tagline ."
	"content navtree"
	"content navtree"
	"footer footer";
	}

.masthead {
	width: 550px;
	}

.tagline {
	margin-left: 270px;
	}

.slMenu .Full {top: 335px;}

	/*Position content within screen*/
.content {
	margin: 0;
	grid-area: content;
	width: 90vw;
	}	

.adv h2, .hdg h2 {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 300;
	font-style: italic;
	margin: 8px 0 0 0;
	color: rgba(0,204,51,1);
	}
	
.hdg, .adv {
	width: 325px;
	}

	/*Position content within screen*/
.content {
	display: grid;
	grid-template-columns: 1fr .33fr 1fr;
	grid-template-rows: auto 90px auto auto 90px auto;
	grid-template-areas:
	"pr1 pri1 ."
	". prhdg prhdg"
	"pr2 pri2 ."
	". pri3 pr3"
	"pradv pradv ."
	". pri4 pr4";
	}

.indent {
    display: block;
    width: 350px;
    margin: -20px 0 -10px 20px;
	}
	
.item1.text, .item2.text, .item3.text, .item4.text {
	margin-top: 25px;
	width: 36vw;
	}
.text p {margin-left: 10px;}

.item1.text p {padding-right: 10px;}	
.item1.text img {margin-left: -5px;}
.item2.text {margin-top: 20px;}
.item2.text p {margin-top: 10px; padding-right: 10px;}

.item3.rt .indent, .item4.rt .indent {width: 300px;}

.item3.text {margin-top: -5px;}
.item3.text img {margin-left: 5px; margin-top: 20px;}
.item3.text p {margin-top: 0;}

.item4.text {margin-top: 15px;}
.item4.text img {width: 175px; margin-left: 10px;}
.item4.text p {margin-top: 0;}
	
.item1.img, .item2.img, .item3.img, .item4.img {
	width: 12vw;
	margin-top: 25px;
	}
.item1.img {margin-top: 172px;}
.item2.img {margin-top: 150px;}
.item1.img .btnGallery, .item2.img .btnGallery {margin-left: 5px;}

.item3.img {margin-top: 162px;}
.item4.img {margin-top: 116px;}
.item3.img .btnGallery, .item4.img .btnGallery {margin-left: 5px;}

.btnGallery {width: 115px; height: 45px; margin-bottom: 20px;}
#btn {display: inline-block; width: 125px; margin-top: -15px; margin-left: -20px;}
}