@media all 
{
		

	body, html 
	{
		background-image: url("/images/Steel-Background.jpg");
		
	}
	
	body
	{  
		height:100%;
		margin:0;
		padding:0;
	}
/* ------------------------------------------------------------- */
.container
{
	
	min-height:100%;

	
	display: grid;
		grid-template-columns:max-content;
		grid-template-rows:  auto; 
	
		-moz-column-gap: 5px;
		column-gap: 5px;
	
		-moz-row-gap: 20px;	
		row-gap: 20px;	
}

header
{
	grid-column-start: auto;
	grid-column-end: auto;
	grid-row-start: 1;
	grid-row-end: 1;
}	

nav
{
	grid-column-start: auto;
	grid-column-end: auto;
	grid-row-start: 2;
	grid-row-end: 2;
}	

section.intro
{
	grid-column-start: auto;
	grid-column-end: auto;
	grid-row-start: 3;
	grid-row-end: 3;
}


main
{
	grid-column-start:auto;
	grid-column-end: auto;
	grid-row-start: 4;
	grid-row-end: 4;
}

footer 
{
    grid-column-start: auto;
    grid-column-end: auto;
    grid-row-start: 5;
    grid-row-end: 5;
}



.fade-out-borders-top-to-bottom
{
	-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
	-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
	-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
	-o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
	border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}

.fade-out-borders-bottom-to-top
{
	-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
	-webkit-border-image: -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
	-moz-border-image: -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
	-o-border-image: -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
	border-image: linear-gradient(to top, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}

.fade-out-borders-left-to-right
{
	-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
	-webkit-border-image: -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0) 50%) 1 100%;
	-moz-border-image: -moz-linear-gradient(right, black, rgba(0, 0, 0, 0) 50%) 1 100%;
	-o-border-image: -o-linear-gradient(right, black, rgba(0, 0, 0, 0) 50%) 1 100%;
	border-image: linear-gradient(to right, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}

.fade-out-borders-right-to-left
{
	-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
	-webkit-border-image: -webkit-linear-gradient(left, black, rgba(0, 0, 0, 0) 50%) 1 100%;
	-moz-border-image: -moz-linear-gradient(left, black, rgba(0, 0, 0, 0) 50%) 1 100%;
	-o-border-image: -o-linear-gradient(left, black, rgba(0, 0, 0, 0) 50%) 1 100%;
	border-image: linear-gradient(to left, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}

/* ------- NAVIGATION ROW-------------------------------------------------- */
nav
{
	width: 100%;
	position: relative;
	display: block;
	margin-left: -20px;
	margin-right: auto;
}
	
a.nav-button:hover 
{
	background-image: url("/images/cream-granite-small.jpg");
	border-radius: 4px;
	color: black;	
}
	
nav ul
{
	display: block;
	width: 100%;
	text-align: center;
	margin: auto;
	position: relative;
}

nav ul li
{
	white-space: nowrap;
	text-decoration: none;
	width: auto;
	display: inline-block;
	margin-left:10px;
	margin-right:10px;
	padding-left:5px;
	padding-right: 5px;	
	
}
	
nav ul li a 
{
	font-size: 18px;
	font-weight: 900;
	color: #565252;
	text-decoration: none;
	border-width: 4px;
	border-style: solid;
	border-radius: 10px;
	width:100%;
	text-align:center;
	display: block;
	background-image: url("/images/white-granite-small.jpg");
	color: white;
	padding:4px;
	margin:1px;
	text-shadow: 5px 5px 5px rgba(163, 179, 179, 0.8);
	box-shadow: 10px 10px 5px rgba(155, 155, 155, .4);
}

/* ---------INTRO SECTION ---------------------------------------------------- */

section.intro .hidepic 
{
    display: unset;    
}

.eliminate
{
    display: unset;
}

section.intro
{
	display: block;
	position: relative;
	text-align: center;
	color:white;
	align-items: center;
	margin-left: -10px;
	width: 100%;
}

section.intro img
{
	display: inline-block;  
}


.thumbnail2
{
	display: inline-block;
	width: 225px;
	height: 225px;
	border-width: 4px;
	border-style: solid;
	object-fit: cover;
	box-shadow: 15px 15px 15px rgba(155, 155, 155, .6);
	transition: box-shadow 0.3s ease-in-out;
}


.thumbnail2 img 
{
    max-width: 100%;
    max-height: 100%;
}
	
.bottom-left 
{
    position: absolute;
    bottom: -50px;
    left: 13px;
}


.top-left 
{
    position: absolute;
    top: -57px;
    left: 13px;
}


.top-right 
{
    position: absolute;
    top: -55px;
    right: 16px;
}


.bottom-right 
{
    position: absolute;
    bottom: -45px;
    right: 16px;
}


.centered 
{
     position: absolute;
    top: 75px;
    right: 490px;
}	

#first-word h1 
{
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;	 		
}

#second-word h2 
{ 
    -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 5s; /* Firefox < 16 */
        -ms-animation: fadein 5s; /* Internet Explorer */
         -o-animation: fadein 5s; /* Opera < 12.1 */
            animation: fadein 5s;	   
}

#third-word h2 
{ 
    -webkit-animation: fadein 7s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 7s; /* Firefox < 16 */
        -ms-animation: fadein 7s; /* Internet Explorer */
         -o-animation: fadein 7s; /* Opera < 12.1 */
            animation: fadein 7s;	   
}

#fourth-word h2 
{
    -webkit-animation: fadein 9s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 9s; /* Firefox < 16 */
        -ms-animation: fadein 9s; /* Internet Explorer */
         -o-animation: fadein 9s; /* Opera < 12.1 */
            animation: fadein 9s;	   
}

#fifth-word h2 
{  
    -webkit-animation: fadein 11s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 11s; /* Firefox < 16 */
        -ms-animation: fadein 11s; /* Internet Explorer */
         -o-animation: fadein 11s; /* Opera < 12.1 */
            animation: fadein 11s;	   
}

@keyframes fadein 
{
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein 
{
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein 
{
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein 
{
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein 
{
    from { opacity: 0; }
    to   { opacity: 1; }
}
/*----------ARTICLE SECTION -----------------------------------------------------------------------------------*/
	
article
{	
	background-image: url("/images/white-granite.jpg");
	background-size: 100%;
	font: normal 22px 'Bitter', serif;
	line-height: 1.5; 
	padding: 30px;
	width:95%;
	height: auto;
}
	
	
	li.benefits
	{
	list-style-type: circle solid;	
	font-size: 32px;
	margin-left: 50px;
	width: 90%;
	
	}
	
	h2
	{
		color: black;
	}
	h2 span
	{
		color: red;
	}
	
	div.paragraph
	{
		text-indent: 50px;
	}
	
	div.picture-float-right
	{
		float: right;
		width: 400;
		height: 400;
		object-fit: cover;
		overflow: auto;
		padding: 10px;
		box-shadow: 20px 20px 10px rgba(155, 155, 155, .4);
		transition: box-shadow 0.3s ease-in-out;
		
	}
	
	figure
	{
		text-align: center ;
		display: block;
		
	}
	
	figcaption
	{
		text-align: center 
	}
	

	div#no-left
	{
		float: right;
		clear: left;
		 
	}
	
	div#no-right
	{
		 float: right;
		 clear: right;
	}
	

	figcaption#resize_figcaption
	{
	    font-size: 18px;
	    width: 300px;
	}
	
	div.picture-float-left
	{
		float: left;
		width: 400;
		height: 400;
		object-fit: cover;
		overflow: auto;
		padding: 0px;
		border: 10px;
		margin-right: 20px;
		box-shadow: 20px 20px 10px rgba(155, 155, 155, .4);
		transition: box-shadow 0.3s ease-in-out;
	}

	div.phos-bottom figcaption
	{
			font-size: 22px;
			width: 300px;
	}
	
	div.muscle-biopsy figcaption
	{
			font-size: 22px;
			width: 450px;
			text-align: center;	
	}
	
	div.muscle-biopsy img
	{
			width: 400px;
			height: 300px;
	}
	
	figcaption
	{
		display: block;
		font-weight: 600;
		font-size: 26px;
		font-style: italic;
		width: 430px;
		text-align: center;	
		padding-bottom: -20px;
	}
	
	figure
	{
		padding: 0px;
		text-align: center;	
		display: inline-block;
	
	}
	
	figure img
	{
		width: 430px;
		height: 400px;
	}

	.article-subsection
	{
		float: none;
		text-align: justify;
		text-justify: inter-word;
	}

	#hesp
	{
	    width: 430px;
	    height: 430px;
	}
	
		#narn
	{
	    width: 440px;
	    height: 500px;
	}
	
	.footnotes
	{
		font-size: 16px;
	}

	
	ol li
	{
		font-size: 24px;
		text-indent: 15px;
	}
	
	ol
	{
		margin-left: 50px;
		margin-right: 75px;
	}
	
	li#study_subdetails
	{
	    font-size: 17px;
	}
	
	
/* --------------------ARTICLES BOXES ----------------------------------------- */	
section.articleslisting
{
	align-items: center;
	vertical-align:top;
	margin-bottom: 10px;
	margin-top:0px;
	display: block;
}

a 
{
text-decoration: none;
}

section.articlesummary
{
	width: 300px;
	height: 300px;
	display: inline-block; 
	border-width: 5px;
	border-style: solid;
	border-radius: 10px;
	box-shadow: 20px 20px 10px rgba(155, 155, 155, .4);
	transition: box-shadow 0.3s ease-in-out;
	position: relative;
	margin: 40px 40px 40px 40px;
	vertical-align:top;
	text-align: center;	
}

	.articleblurb 
	{
        white-space: normal;
        width: 285px;
		margin-top: -5px;
		font-weight: 800;
		font-size: 18px;
    }

.grey
{
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.8);
}

section.articlesummary 
{
	background-image: url("/images/white-granite.jpg");
	margin-top: -15px;
}

.thumbnail
{
	display: inline-block;
	width: 200px;
	height: 175px;
	border-width: 5px;
	border-style: solid;
	border-radius: 10px;
	margin-top: -15px;
	object-fit: cover;
}


 a:link
{
color: black;
}
 a:visited 
{
color: black;
}


/* -----------FOOTER SECTION -------------------------------------------------- */
	
footer 
{
	font-size: 40px;
	font-weight: 900;
	color: #fcfcfc;
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.8);
	margin: auto;
}


div.footer-links a:link
{
color: #fcfcfc;
}
div.footer-links a:visited 
{
color: #fcfcfc;
}
div.footer-links a:hover 
{
color: #aa5858;
}

div.footer-links
{
    font-size: 12px;
}
/* --------- -H TAGS --------------------------------------------------- */
	
h1 , h2 , H3
{
	text-shadow: 15px 10px 10px rgba(163, 179, 179, 0.8);
}
	
h2
{
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.8);
	font-size: 60px;
	font-weight: 2000;
}
	
h1 
{
	font-size: 80px;
	font-weight: 2000;
	margin-top: 0px;
	margin-bottom: 0px;
}

h1.main-title
{
	font-size: 120px;	
}
	
h1.subtitle	
{
	font-style: italic;
}
	
h3 
{
	font-size: 24px;
	font-weight: 2000;
	margin-top: -3px;
}
	
h3.bct
{
	font-size: 22px;
	font-weight: 2000;
}

h3.benes
{
	font-size: 42px;
	font-weight: 9000;
}

.whiten
{
	color: white;
}


}  /* end of this size --- */


/* END OF MEDIA ALL SECTION ----------------------------------------------------*/






	
/* ------------------------   MEDIA  QUERIES ------------------------------------ */
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/

/*---------------------------------- iPhone 4  and 5  ------------------------------------*/

@media only screen and (min-width : 320px) /* and (-webkit-min-device-pixel-ratio : 2) */
{

.container
{
	
		min-height:100%;
	width: 320px;
		 margin:auto;

	display: grid;
		grid-template-columns: 317px;
		grid-template-rows:  auto; 
		-moz-column-gap: 5px;
		column-gap: 5px;
		-moz-row-gap: 5px;	
		row-gap: 5px;	
}


/*-------------- GRID LAYOUT -----------------------------------------*/

  main 
  { 
    max-width: 100%;
    margin: 0;
  }
 
  .header-grid2 
  {
    max-width: 100%;
    margin: 0;
    margin-bottom: 1rem;
    font-family: Avenir, Roboto, Helvetica, san-serif; 
  }

 
.grid-part2
{
  padding: 0rem;
  align-self: center;
  text-align: center;
}

.grid-part2 > h1 
{
  font-size:60px;
  line-height: .9em;
  margin-left: -20px;
}


/* ------- NAVIGATION ROW-------------------------------------------------- */

		nav ul
	{
	display: block;
	width: 100%;
	text-align: center;
	margin: auto;
	position: relative;
	}
	
	nav ul li
	{
	margin-left:8px;
	margin-right:8px;
	padding-left:4px;
	padding-right: 4px;		
	}

	nav ul li
	{
	white-space: nowrap;
	text-decoration: none;
	width: 90%;
	display: block;
	margin-left:-15px;
	margin-right:0px;
	margin-bottom: 12px;
	padding-left:2px;
	padding-right: 2px;	
	
	}
	
	nav ul li a, .nav-button 
	{
	font-size: 	24px;
	font-weight: 900;
	color: #565252;
	text-decoration: none;
	border-width: 3px;
	border-style: solid;
	border-radius: 10px;
	width:100%;
	text-align:center;
	display: block;
	background-image: url("/images/white-granite-small.jpg");
	background-color: white;
	padding:2px;
	margin:1px;
	
	}	


/* ---------INTRO SECTION ---------------------------------------------------- */

.eliminate
	{
		display: none;
	}


section.intro
{
	display: block;
	position: relative;
	text-align: center;
	color:white;
	align-items: center;
	margin-left: -15px;
	width: 100%;
}

img.thumbnail2
{
	width: 320px;
	height: 320px;
	border-width: 8px;
	border-style: solid;
	object-fit: cover;
	box-shadow: 10px 10px 10px rgba(155, 155, 155, .6);
	transition: box-shadow 0.3s ease-in-out;
}

	
h2.bottom-left 
{
    position: absolute;
    bottom: 30px;
    left: 13px;
}


h2.top-left 
{
    position: absolute;
    top: -30px;
    left:  18px;
}


h2.top-right 
{
    position: absolute;
    top: -30px;
    right: -12px;
}


h2.bottom-right 
{
    position: absolute;
    bottom: 30px;
    right: -10px;
}


h1.centered 
{
 position: absolute;
    top: 145px;
    right: 60px;
}	


section.intro .hidepic
{
    display: none;    
}
/*----------ARTICLE SECTION -----------------------------------------------------------------------------------*/
	
article
{	
    background-image: url("/images/white-granite.jpg");
	background-size: 100%;
	font: normal 15px 'Bitter', serif;
	line-height: 1.25; 
	padding: 14px;
	width:98%;
	height: auto;
	margin-left: -15px;
}

	.article-subsection
	{
		float: none;
		text-align: justify;
    text-justify: inter-word;
	}	
	
	li.benefits
	{
	list-style-type: circle solid;	
	font-size: 18px;
	font-style: italic;
	margin-left: 0px;
	}
	
	h2
	{
		color: black;
	}
	
	h2 span
	{
		color: red;
	}
	
	div.paragraph
	{
		text-indent: 25px;
	}
	
	figure
	{
	    width: 145px;
	    object-fit: cover;
		text-align: center;
		overflow: auto;
		display: block;
		margin: 5px;
		box-shadow: 6px 6px 3px rgba(155, 155, 155, .4);
		transition: box-shadow 0.3s ease-in-out;
		
	}
	
	figure.picture-float-left
	{
	    float: left;
	}
	
	figure.picture-float-right
	{
	    float: right;
	}


	div#no-left
	{
		float: right;
		clear: left;
		 
	}
	
	div#no-right
	{
		 float: right;
		 clear: right;
	}
	

	figcaption
	{
		display: block;
		font-weight: 600;
		font-size: 13px;
		font-style: italic;
		width: 120px;
		margin: auto;
		text-align: center;	
	}
	
	figure
	{
		padding: 0px;
		text-align: center;	
		display: inline-block;
	}
	
	figure img
	{
		width: 120px;
		height: 120px;
	}

	#first
	{
		width: 120px;
		height: 120px;
		align: center;
	}

	#second
	{
		width: 1px;
		height: 1px;
	}
	
	.footnotes
	{
		font-size: 12px;
	}

	
	ol li
	{
		font-size: 24px;
		text-indent: 15px;
	}
	
	ol
	{
		margin-left: 50px;
		margin-right: 75px;
	}
	


	section.articleslisting, section.toolslisting
	{
		margin-bottom: 4px;
		margin-left: -20px;
	}


/* ------------------- ARTICLES BOXES -----------------------------------------*/

	section.articlesummary
	{
		width: 285px;
		height: 285px; 
		box-shadow: 10px 10px 6px rgba(155, 155, 155, .4);
		margin-left: 15px;
		margin-bottom: 20px;
		display: block;
	}

	section.articlesummary 
	{
		margin-top: 0px;
	}
	
	.thumbnail
	{
		width: 225px;
		height: 150px;
		margin-top: -20px;
	}

	.articleblurb 
	{
        white-space: normal;
        width: 265px;
		margin-top: 0px;
		font-weight: 700;
		font-size: 19px;
		margin-top: 3px;
    }
	
	
	h3 
	{
		font-size: 24px;
		font-weight: 900;
		margin-top: -3px;
	}
		
	h3#bct
	{
		font-size: 20px;
		font-weight: 900;
	}
		
	
	
/* -----------FOOTER SECTION -------------------------------------------------- */
	
footer 
{
	font-size: 18px;
	font-weight: 900;
	color: #fcfcfc;
	text-shadow: 5px 3px 3px rgba(163, 179, 179, 0.8);
	margin: auto;
}
/* --------- -H TAGS --------------------------------------------------- */
	
h1 , h2 , H3
{
	text-shadow: 5px 3px 3px rgba(163, 179, 179, 0.6);
}
	
h2
{
	text-shadow: 5px 3px 3px rgba(163, 179, 179, 0.6);
	font-size: 40px;
	font-weight: 2000;
}

h2.whiten
{
    font-size: 40px;    

}

h2#rating
{
    font-size: 28px;    
}


	
h1 
{
	font-size: 60px;
	font-weight: 2000;
	margin-top: 0px;
	margin-bottom: 0px;
}

h1.main-title
{
	font-size: 36px;	
}
	
h1.subtitle	
{
	font-style: italic;
	font-size: 28px;
}
	
h3 
{
	font-size: 24px;
	font-weight: 2000;
	margin-top: -3px;
}
	
h3.bct
{
	font-size: 22px;
	font-weight: 2000;
}

h3.benes
{
	font-size: 28px;
	font-weight: 9000;
}

.whiten
{
	color: white;
}

} /* end of this size --- */

/*---------------------------------- iPhone 6 ------------------------------------*/
@media only screen and (min-width: 375px)/*- and (-webkit-device-pixel-ratio: 2) */

{

.container
{
	
         min-height:100%;
		 width: 375px;
		 margin:auto;

    	display: grid;
		grid-template-columns:373px;
		grid-template-rows:  auto;
		column-gap: 3px;
		-moz-row-gap: 5px;	
		row-gap: 5px;	
}

	
/*-------------- GRID LAYOUT -----------------------------------------*/

  main 
  { 
    max-width: 100%;
    margin: 0;
  }
 
  .header-grid2 
  {
    max-width: 100%;
    margin: 0;
    margin-bottom: 1rem;
    font-family: Avenir, Roboto, Helvetica, san-serif; 
  }

 
.grid-part2
{
  padding: 0rem;
  align-self: center;
  text-align: center;
}

.grid-part2 > h1 
{
  font-size:85px;
  line-height: .9em;
  margin-left: -20px;
}

/*------------------- nav area --------------------*/
	
		nav ul
	{
	display: block;
	width: 100%;
	text-align: center;
	margin: auto;
	position: relative;
	}
	
	nav ul li
	{
	margin-left:8px;
	margin-right:8px;
	padding-left:4px;
	padding-right: 4px;		
	}


	nav ul li
	{
	white-space: nowrap;
	text-decoration: none;
	width: 90%;
	display: block;
	margin-left:-20px;
	margin-right:0px;
	margin-bottom: 18px;
	padding-left:2px;
	padding-right: 2px;	
	
	}
	
	nav ul li a 
	{
	font-size: 	24px;
	font-weight: 900;
	color: #565252;
	text-decoration: none;
	border-width: 3px;
	border-style: solid;
	border-radius: 10px;
	width:100%;
	text-align:center;
	display: block;
	background-image: url("/images/white-granite-small.jpg");
	padding:2px;
	margin:1px;
	text-shadow: 3px 3px 3px rgba(163, 179, 179, 0.8);
	box-shadow: 6px 6px 3px rgba(155, 155, 155, .6);
	}	
	
/* ---------INTRO SECTION ---------------------------------------------------- */

.eliminate
	{
		display: none;
	}


section.intro
{
	display: block;
	position: relative;
	text-align: center;
	color:white;
	align-items: center;
	margin-left: -15px;
	width: 100%;
}

img.thumbnail2
{
	width: 350px;
	height: 350px;
	border-width: 8px;
	border-style: solid;
	object-fit: cover;
	box-shadow: 10px 10px 10px rgba(155, 155, 155, .6);
	transition: box-shadow 0.3s ease-in-out;
}

	
h2.bottom-left 
{
    position: absolute;
    bottom: 0px;
    left: 13px;
}


h2.top-left 
{
    position: absolute;
    top: -30px;
    left:  18px;
}


h2.top-right 
{
    position: absolute;
    top: -30px;
    right: 5px;
}


h2.bottom-right 
{
    position: absolute;
    bottom: 5px;
    right: 5px;
}


h1.centered 
{
 position: absolute;
    top: 155px;
    right: 80px;
}	


section.intro .hidepic
{
    display: none;    
}
/*----------ARTICLE SECTION -----------------------------------------------------------------------------------*/
	
article
{	
    background-image: url("/images/white-granite.jpg");
	background-size: 100%;
	font: normal 16px 'Bitter', serif;
	line-height: 1.3; 
	padding: 15px;
	width:97%;
	height: auto;
	margin-left: -15px;
}

	.article-subsection
	{
		float: none;
		text-align: justify;
    text-justify: inter-word;
	}	
	
	li.benefits
	{
	list-style-type: circle solid;	
	font-size: 22px;
	font-style: italic;
	margin-left: 0px;
	}
	
	h2
	{
		color: black;
	}
	
	h2 span
	{
		color: red;
	}
	
	div.paragraph
	{
		text-indent: 25px;
	}
	

	figure
	{
	    width: 180px;
	    object-fit: cover;
		text-align: center;
		overflow: auto;
		display: block;
		margin: 5px;
		box-shadow: 6px 6px 3px rgba(155, 155, 155, .4);
		transition: box-shadow 0.3s ease-in-out;
		
	}
	
	figure.picture-float-left
	{
	    float: left;
	}
	
	figure.picture-float-right
	{
	    float: right;
	}


	div#no-left
	{
		float: right;
		clear: left;
		 
	}
	
	div#no-right
	{
		 float: right;
		 clear: right;
	}
	

	figcaption
	{
		display: block;
		font-weight: 600;
		font-size: 13px;
		font-style: italic;
		width: 176px;
		margin: auto;
		text-align: center;	
	}
	
	figure
	{
		padding: 0px;
		text-align: center;	
		display: inline-block;
	}
	
	figure img
	{
		width: 150px;
		height: 150px;
	}

	#first
	{
		width: 150px;
		height: 150px;
		align: center;
	}

	#second
	{
		width: 1px;
		height: 1px;
	}
	
	.footnotes
	{
		font-size: 12px;
	}

	
	ol li
	{
		font-size: 24px;
		text-indent: 15px;
	}
	
	ol
	{
		margin-left: 50px;
		margin-right: 75px;
	}
	
	/*--------------- ARTICLES BOXES -------------------*/

	section.articleslisting
	{
		margin-bottom: 4px;
		margin-left:7px;
	}

	section.articlesummary
	{
		width: 315px;
		height: 315px; 
		box-shadow: 10px 10px 6px rgba(155, 155, 155, .4);
		margin-left: 5px;
		margin-bottom: 30px;
		display: block;
	}

	section.articlesummary 
	{
		margin-top: 0px;
	}
	
	.thumbnail
	{
		width: 255px;
		height: 175px;
		margin-top: -20px;
	}

	.articleblurb 
	{
        white-space: normal;
        width: 285px;
		margin-top: 0px;
		font-weight: 700;
		font-size: 19px;
		margin-top: 3px;
    }
	
		
	h3 
	{
		font-size: 28px;
		font-weight: 900;
		margin-top: -3px;
	}
		
	h3#bct
	{
		font-size: 22px;
		font-weight: 900;
	}
	
/* -----------FOOTER SECTION -------------------------------------------------- */
	
footer 
{
	font-size: 24px;
	font-weight: 900;
	color: #fcfcfc;
	text-shadow: 5px 3px 3px rgba(163, 179, 179, 0.8);
	margin: auto;
}
/* --------- -H TAGS --------------------------------------------------- */
	
h1 , h2 , H3
{
	text-shadow: 5px 3px 3px rgba(163, 179, 179, 0.6);
}
	
h2
{
	text-shadow: 5px 3px 3px rgba(163, 179, 179, 0.6);
	font-size: 40px;
	font-weight: 2000;
}

h2.whiten
{
    font-size: 40px;    

}

h2#rating
{
    font-size: 32px;    
}


	
h1 
{
	font-size: 60px;
	font-weight: 2000;
	margin-top: 0px;
	margin-bottom: 0px;
}

h1.main-title
{
	font-size: 40px;	
}

#phos-bottle
{
    clear: left;
}
	
h1.subtitle	
{
	font-style: italic;
	font-size: 32px;
}
	
h3 
{
	font-size: 24px;
	font-weight: 2000;
	margin-top: -3px;
}
	
h3.bct
{
	font-size: 22px;
	font-weight: 2000;
}

h3.benes
{
	font-size: 32px;
	font-weight: 9000;
}

.whiten
{
	color: white;
}

} /* end of this size --- */

/* ---------------------------------------iphone 6+, 6s+, 7+, 8+ ----------------------------*/


@media only screen and (min-width: 411px) 

{

.container
{
	
	 min-height:100%;
		 width: 410px;
		 margin:  auto;

	display: grid;
		grid-template-columns: 408px;
		grid-template-rows:  auto 300px 400px auto 40px; 
		-moz-column-gap: 5px;
		column-gap: 5px;
		-moz-row-gap: 5px;	
		row-gap: 5px;	
}

/*-------------- GRID LAYOUT -----------------------------------------*/

  main 
  { 
    max-width: 100%;
    margin: 0;
  }
 
  .header-grid2 
  {
    max-width: 100%;
    margin: 0;
    margin-bottom: 1rem;
    font-family: Avenir, Roboto, Helvetica, san-serif; 
  }

 
.grid-part2
{
  padding: 0rem;
  align-self: center;
  text-align: center;
}

.grid-part2 > h1 
{
  font-size:85px;
  line-height: .9em;
  margin-left: -20px;
}

/*------------------- nav area --------------------*/
	
		nav ul
	{
	display: block;
	width: 100%;
	text-align: center;
	margin: auto;
	position: relative;
	}
	
	nav ul li
	{
	white-space: nowrap;
	text-decoration: none;
	width: 90%;
	display: block;
	margin-left:-15px;
	margin-right:0px;
	margin-bottom: 15px;
	padding-left:2px;
	padding-right: 2px;	
	
	}
	
	nav ul li a 
	{
	font-size: 	24px;
	font-weight: 900;
	color: #565252;
	height: 30px;
	text-decoration: none;
	border-width: 3px;
	border-style: solid;
	border-radius: 10px;
	width:100%;
	text-align:center;
	display: block;
	background-image: url("/images/white-granite-small.jpg");
	padding:2px;
	margin:1px;
	text-shadow: 3px 3px 3px rgba(163, 179, 179, 0.8);
	box-shadow: 6px 6px 3px rgba(155, 155, 155, .6);
	}	
/* ---------INTRO SECTION ---------------------------------------------------- */

.eliminate
	{
		display: none;
	}


section.intro
{
	display: block;
	position: relative;
	text-align: center;
	color:white;
	align-items: center;
	margin-left: -15px;
	width: 100%;
}

img.thumbnail2
{
	width: 360px;
	height: 360px;
	border-width: 8px;
	border-style: solid;
	object-fit: cover;
	box-shadow: 10px 10px 10px rgba(155, 155, 155, .6);
	transition: box-shadow 0.3s ease-in-out;
}

	
h2.bottom-left 
{
    position: absolute;
    bottom: 0px;
    left: 13px;
}


h2.top-left 
{
    position: absolute;
    top: -30px;
    left:  18px;
}


h2.top-right 
{
    position: absolute;
    top: -30px;
    right: 15px;
}


h2.bottom-right 
{
    position: absolute;
    bottom: 0px;
    right: 20px;
}


h1.centered 
{
 position: absolute;
    top: 155px;
    right: 110px;
}	


section.intro .hidepic
{
    display: none;    
}
/*----------ARTICLE SECTION -----------------------------------------------------------------------------------*/
	
article
{	
    background-image: url("/images/white-granite.jpg");
	background-size: 100%;
	font: normal 16px 'Bitter', serif;
	line-height: 1.3; 
	padding: 15px;
	width:95%;
	height:auto;
	margin-left: -15px;
}

	.article-subsection
	{
		float: none;
    	text-align: justify;
        text-justify: inter-word;
	}	
	
	li.benefits
	{
	list-style-type: circle solid;	
	font-size: 22px;
	font-style: italic;
	margin-left: 0px;
	}
	
	h2
	{
		color: black;
	}
	
	h2 span
	{
		color: red;
	}
	
	div.paragraph
	{
		text-indent: 25px;
	}
	
	figure
	{
	    width: 176px;
	    object-fit: cover;
		text-align: center;
		overflow: auto;
		display: block;
		margin: 5px;
		box-shadow: 6px 6px 3px rgba(155, 155, 155, .4);
		transition: box-shadow 0.3s ease-in-out;
		
	}
	
	figure.picture-float-left
	{
	    float: left;
	}
	
	figure.picture-float-right
	{
	    float: right;
	}


	div#no-left
	{
		float: right;
		clear: left;
		 
	}
	
	div#no-right
	{
		 float: right;
		 clear: right;
	}
	

	figcaption
	{
		display: block;
		font-weight: 600;
		font-size: 14px;
		font-style: italic;
		width: 165px;
		margin: auto;
		text-align: center;	
	}
	
	figure
	{
		padding: 0px;
		text-align: center;	
		display: inline-block;
	}
	
	figure img
	{
		width: 150px;
		height: 150px;
	}

	#first
	{
		width: 150px;
		height: 150px;
		align: center;
	}

	#second
	{
		width: 1px;
		height: 1px;
	}
	
	.footnotes
	{
		font-size: 12px;
	}

	
	ol li
	{
		font-size: 24px;
		text-indent: 15px;
	}
	
	ol
	{
		margin-left: 50px;
		margin-right: 75px;
	}

/* -------------------- ARTICLES BOXES ----------------------------------*/
		section.articleslisting
	{
		margin-bottom: 4px;
	}

	section.articlesummary
	{
		width: 325px;
		height: 325px; 
		box-shadow: 10px 10px 6px rgba(155, 155, 155, .4);
		margin-left: 25px;
		margin-bottom: 30px;
		display: block;
	}

	section.articlesummary 
	{
		margin-top: 0px;
	}
	
	.thumbnail
	{
		width: 265px;
		height: 185px;
		margin-top: -20px;
	}

	.articleblurb 
	{
        white-space: normal;
        width: 310px;
		margin-top: 0px;
		font-weight: 700;
		font-size: 20px;
		margin-top: 3px;
    }
	

	h3 
	{
		font-size: 32px;
		font-weight: 900;
		margin-top: -3px;
	}
		
	h3#bct
	{
		font-size: 26px;
		font-weight: 900;
	}
	
/* -----------FOOTER SECTION -------------------------------------------------- */
	
footer 
{
	font-size: 24px;
	font-weight: 900;
	color: #fcfcfc;
	text-shadow: 5px 3px 3px rgba(163, 179, 179, 0.8);
	margin: auto;
}
/* --------- -H TAGS --------------------------------------------------- */
	
h1 , h2 , H3
{
	text-shadow: 5px 3px 3px rgba(163, 179, 179, 0.6);
}
	
h2
{
	text-shadow: 5px 3px 3px rgba(163, 179, 179, 0.6);
	font-size: 40px;
	font-weight: 2000;
}

h2.whiten
{
    font-size: 40px;    

}

h2#rating
{
    font-size: 32px;    
}


	
h1 
{
	font-size: 60px;
	font-weight: 2000;
	margin-top: 0px;
	margin-bottom: 0px;
}

h1.main-title
{
	font-size: 45px;	
}
	
h1.subtitle	
{
	font-style: italic;
	font-size: 32px;
}
	
h3 
{
	font-size: 24px;
	font-weight: 2000;
	margin-top: -3px;
}
	
h3.bct
{
	font-size: 22px;
	font-weight: 2000;
}

h3.benes
{
	font-size: 32px;
	font-weight: 9000;
}

.whiten
{
	color: white;
}

} /* end of this size --- */

/*------------------------- Extra Small Devices and Phones ---------------------------------------*/
@media only screen and (min-width: 480px)

{

.container
{
	
     min-height:100%;
		 width: 480px;
		 margin:auto;

	
    	display: grid;
		grid-template-columns:470px;
		grid-template-rows:  auto; 
		-moz-column-gap: 5px;
		column-gap: 5px;
		-moz-row-gap: 15px;	
		row-gap: 15px;	
}


/*-------------- GRID LAYOUT -----------------------------------------*/

  main 
  { 
    max-width: 100%;
    margin: 0;
  }
 
  .header-grid2 
  {
    max-width: 100%;
    margin: 0;
    margin-bottom: 1rem;
    font-family: Avenir, Roboto, Helvetica, san-serif; 
  }

 
.grid-part2
{
  padding: 0rem;
  align-self: center;
  text-align: center;
}

.grid-part2 > h1 
{
  font-size:85px;
  line-height: .9em;
}

/* ------- NAVIGATION ROW-------------------------------------------------- */
	
		nav ul
	{
	display: block;
	width: 100%;
	text-align: center;
	margin: auto;
	position: relative;
	}
	
	nav ul li
	{
	margin-left:8px;
	margin-right:8px;
	padding-left:4px;
	padding-right: 4px;		
	}



	nav ul li
	{
	white-space: nowrap;
	text-decoration: none;
	width: 90%;
	display: block;
	margin-left:-10px;
	margin-right:0px;
	margin-bottom: 20px;
	padding-left:2px;
	padding-right: 2px;	
	
	}
	
	nav ul li a 
	{
	font-size: 	28px;
	font-weight: 900;
	color: #565252;
	height: 30px;
	text-decoration: none;
	border-width: 3px;
	border-style: solid;
	border-radius: 10px;
	width:100%;
	text-align:center;
	display: block;
	background-image: url("/images/white-granite-small.jpg");
	padding:2px;
	margin:1px;
	text-shadow: 3px 3px 3px rgba(163, 179, 179, 0.8);
	box-shadow: 6px 6px 3px rgba(155, 155, 155, .6);
	}	
/* ---------INTRO SECTION ---------------------------------------------------- */

section.intro .hidepic
{
    display: none;    
}

	.eliminate
	{
		display: none;
	}

section.intro
{
	display: block;
	position: relative;
	text-align: center;
	color:white;
	align-items: center;
	margin-left: -5px;
	width: 100%;
}

section.intro img
{
	display: inline-block;  
}


img.thumbnail2
{
	display: inline-block;
	width: 425px;
	height: 425px;
	border-width: 8px;
	border-style: solid;
	object-fit: cover;
	box-shadow: 10px 10px 10px rgba(155, 155, 155, .6);
	transition: box-shadow 0.3s ease-in-out;
}


.thumbnail2 img 
{
    max-width: 100%;
    max-height: 100%;
}
	
h2.bottom-left 
{
    position: absolute;
    bottom: -15px;
    left: 13px;
}


h2.top-left 
{
    position: absolute;
    top: -30px;
    left:  15px;
}


h2.top-right 
{
    position: absolute;
    top: -30px;
    right: 3px;
}


h2.bottom-right 
{
    position: absolute;
    bottom: -12px;
    right: 0px;
}


h1.centered 
{
     position: absolute;
    top: 165px;
    right: 90px;
}	

/*----------ARTICLE SECTION -----------------------------------------------------------------------------------*/
	
article
{	
	background-image: url("/images/white-granite.jpg");
	background-size: 100%;
	font: normal 18px 'Bitter', serif;
	line-height: 1.5; 
	padding: 30px;
	width:91%;
	height: auto;
}

	.article-subsection
	{
		float: none;
		text-align: justify;
        text-justify: inter-word;
	}	
	
	li.benefits
	{
	list-style-type: circle solid;	
	font-size: 26px;
	font-style: italic;
	margin-left: 0px;
	}
	
	h2
	{
		color: black;
	}
	
	h2 span
	{
		color: red;
	}
	
	div.paragraph
	{
		text-indent: 25px;
	}
	
	figure
	{
	    width: 185px;
	    object-fit: cover;
		text-align: center;
		overflow: auto;
		display: block;
		margin: 5px;
		box-shadow: 6px 6px 3px rgba(155, 155, 155, .4);
		transition: box-shadow 0.3s ease-in-out;
		
	}
	
	figure.picture-float-left
	{
	    float: left;
	}
	
	figure.picture-float-right
	{
	    float: right;
	}


	div#no-left
	{
		float: right;
		clear: left;
		 
	}
	
	div#no-right
	{
		 float: right;
		 clear: right;
	}
	

	figcaption
	{
		display: block;
		font-weight: 600;
		font-size: 16px;
		font-style: italic;
		width: 160px;
		margin: auto;
		text-align: center;	
	}
	
	figure
	{
		padding: 0px;
		text-align: center;	
		display: inline-block;
	
	}
	
	figure img
	{
		width: 160px;
		height: 160px;
	}
	

	
    img#second
	{
		width: 1px;
		height: 1px;
	}
	
	
	img#first
	{
		width:160px;
		height: 160px;
		align: center;
	}
	
	
	.footnotes
	{
		font-size: 12px;
	}

	
	ol li
	{
		font-size: 24px;
		text-indent: 15px;
	}
	
	ol
	{
		margin-left: 50px;
		margin-right: 75px;
	}
	
    sup 
    {
        font-size: 14px;
    }
    
  /*------------------------------ARTICLES BOXES ---------------------------*/

	section.articleslisting
	{
		margin-bottom: 4px;
	}

	section.articlesummary
	{
		width: 400px;
		height: 400px; 
		box-shadow: 12px 12px 8px rgba(155, 155, 155, .6);
		margin-left: -15px;
		margin-bottom: 50px;
		display: block;
	}

	section.articlesummary 
	{
		margin-top: 0px;
	}
	
	.thumbnail
	{
		width: 325px;
		height: 250px;
		margin-top: -20px;
	}

	.articleblurb 
	{
        white-space: normal;
        width: 390px;
		margin-top: 0px;
		font-weight: 700;
		font-size: 22px;
		margin-top: 3px;
    }
	

	h3 
	{
		font-size: 36px;
		font-weight: 900;
		margin-top: -3px;
	}
		
	h3#bct
	{
		font-size: 26px;
		font-weight: 900;
	}
	  
    
/* -----------FOOTER SECTION -------------------------------------------------- */
	
footer 
{
	font-size: 28px;
	font-weight: 900;
	color: #fcfcfc;
	text-shadow: 5px 3px 3px rgba(163, 179, 179, 0.8);
	margin: auto;
}
/* --------- -H TAGS --------------------------------------------------- */
	
h1 , h2 , H3
{
	text-shadow: 12px 6px 6px rgba(163, 179, 179, 0.8);
}
	
h2
{
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.8);
	font-size: 50px;
	font-weight: 2000;
}

h2#rating
{
    font-size: 36px;    
}


	
h1 
{
	font-size: 80px;
	font-weight: 2000;
	margin-top: 0px;
	margin-bottom: 0px;
}

h1.main-title
{
	font-size: 60px;	
}
	
h1.subtitle	
{
	font-style: italic;
	font-size: 35px;
}
	
h3 
{
	font-size: 24px;
	font-weight: 2000;
	margin-top: -3px;
}
	
h3.bct
{
	font-size: 22px;
	font-weight: 2000;
}

h3.benes
{
	font-size: 32px;
	font-weight: 9000;
}

.whiten
{
	color: white;
}

} /* end of this size --- */


/*------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------*/

/*------------------------- Extra Small Devices and Phones ---------------------------------------*/
@media only screen and (min-width: 800px)

{

.container
{
	
        min-height:100%;
		 width: 790px;
		 margin:auto;

	
    	display: grid;
		grid-template-columns:790px;
		grid-template-rows: auto auto auto auto auto; 
		-moz-column-gap: 5px;
		column-gap: 5px;
		-moz-row-gap: 10px;	
		row-gap: 10px;	
}


/*------GRID LAYOUT ----------------------------*/

@supports (display: grid) 
{
  main 
  { 
    max-width: 100%;
    margin: 0;
  }
 
  .header-grid 
  {
    max-width: 90%;
    margin: 0;
    margin-bottom:.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: .5rem;
    font-family: Avenir, Roboto, Helvetica, san-serif; 
  }
}
  
.grid-part
{
  display: flex;
  flex-flow: column;
  padding: 0rem;
  align-self: center;
  text-align: center;
}

.grid-part > h1 
{
  margin: 1rem 1rem 0;
  font-size:calc(20px + 3vw);
  line-height: .9em;
}

.grid-part .V-logo
{
  max-width: calc(60% + 1vw);
  max-height: calc(60% + 1vw) ;
}

.grid-part  .main-heading-pic
{
  max-width: calc(80% + 3.0vw); 
  margin-left:-50px;
}

#quote
{
	font-size: calc(10px + 1vw);
	color: white;
	font-weight: 600;
	font-style: italic;
	text-shadow: 8px 5px 5px rgba(163, 179, 179, .8);
	padding: 3px;
}

/* ------- NAVIGATION ROW-------------------------------------------------- */

a.nav-button:hover 
{
	background-image: url("/images/cream-granite-small.jpg");
	border-radius: 4px;
	color: black;	
}

nav
{
    margin-left: -45px;
}
	
nav ul
{
display: block;
	width: 100%;
	text-align: center;
	margin: auto;
	position: relative;
}

nav ul li
{
	white-space: nowrap;
	text-decoration: none;
	width: 29%;
	display: inline-block;
	margin-left:10px;
	margin-right:10px;
	padding-left:2px;
	padding-right: 2px;	
	
}
	
nav ul li a 
{
	font-size: 20px;
	font-weight: 900;
	color: #565252;
	text-decoration: none;
	border-width: 4px;
	border-style: solid;
	border-radius: 10px;
	width:100%;
	text-align:center;
	display: block;
	background-image: url("/images/white-granite-small.jpg");
	padding: 1px;
	margin:1px;
	text-shadow: 5px 5px 5px rgba(163, 179, 179, 0.8);
	box-shadow: 10px 10px 5px rgba(155, 155, 155, .4);
}


.DC
{
    font-size: 19px;
}

.PTS
{
    font-size: 19px;
}

/* ---------INTRO SECTION ---------------------------------------------------- */

section.intro .hidepic 
{
   display: unset;
}


.eliminate
{
		display: unset;
}

section.intro
{
	display: block;
	position: relative;
	text-align: center;
	color:white;
	align-items: center;
	margin-left: -5px;
	width: 100%;
}

section.intro img
{
	display: inline-block;  
}


img.thumbnail2
{
	display: inline-block;
	width: 130px;
	height: 130px;
	border-width: 4px;
	border-style: solid;
	object-fit: cover;
	box-shadow: 12px 12px 12px rgba(155, 155, 155, .6);
	transition: box-shadow 0.3s ease-in-out;
}


img.thumbnail2 img 
{
    max-width: 100%;
    max-height: 100%;
}
	
h2.bottom-left 
{
    position: absolute;
    bottom: -38px;
    left: 15px;
}


h2.top-left 
{
    position: absolute;
    top: -35px;
    left: 15px;
}


h2.top-right 
{
    position: absolute;
    top: -35px;
    right: 20px;
}


h2.bottom-right 
{
    position: absolute;
    bottom: -30px;
    right: 20px;
}


h1.centered 
{
     position: absolute;
    top: 35px;
    right: 280px;
}	

/*----------ARTICLE SECTION -----------------------------------------------------------------------------------*/
	
article
{	
	background-image: url("/images/white-granite.jpg");
	background-size: 100%;
	font: normal 19px 'Bitter', serif;
	line-height: 1.5; 
	padding: 30px;
	width:95%;
	height: auto;
}

	.article-subsection
	{
		float: none;
		text-align: justify;
		text-justify: inter-word;
	}	
	
	li.benefits
	{
	list-style-type: circle solid;	
	font-size: 32px;
	margin-left: 50px;
	width: 90%;
	
	}
	
	h2
	{
		color: black;
	}
	
	h2 span
	{
		color: red;
	}
	
	div.paragraph
	{
		text-indent: 30px;
	}
    figure
	{
	    width: 280px;
	    object-fit: cover;
		text-align: center;
		overflow: auto;
		display: block;
		margin: 5px;
		box-shadow: 6px 6px 3px rgba(155, 155, 155, .4);
		transition: box-shadow 0.3s ease-in-out;
		
	}
	
	figure.picture-float-left
	{
	    float: left;
	}
	
	figure.picture-float-right
	{
	    float: right;
	}


	div#no-left
	{
		float: right;
		clear: left;
		 
	}
	
	div#no-right
	{
		 float: right;
		 clear: right;
	}
	

	figcaption
	{
		display: block;
		font-weight: 600;
		font-size: 17px;
		font-style: italic;
		width: 250px;
		margin: auto;
		text-align: center;	
	}
	figure
	{
		padding: 0px;
		text-align: center;	
		display: inline-block;
	
	}
	
	figure img
	{
		width: 250px;
		height: 225px;
	}
	
	.footnotes
	{
		font-size: 14px;
	}

	img#first
	{
	   width: 250px;
	   height: 225px;
	}
	
	ol li
	{
		font-size: 24px;
		text-indent: 15px;
	}
	
	ol
	{
		margin-left: 50px;
		margin-right: 75px;
	}
	
/* ---------------ARTICLES BOXES---------------------------------------------------------------------------------------- */	

section.articleslisting
{
	align-items: center;
	vertical-align:top;
	margin-bottom: 10px;
	margin-top:20px;
	display: block;
}


section.articlesummary
{
	width: 225px;
	height: 225px;
	display: inline-block; 
	border-width: 5px;
	border-style: solid;
	border-radius: 10px;
	box-shadow: 15px 15px 8px rgba(155, 155, 155, .4);
	transition: box-shadow 0.3s ease-in-out;
	position: relative;
	margin: 25px 15px 25px 15px;
	vertical-align:top;
	text-align: center;	
}

	.articleblurb 
	{
        white-space: normal;
        width: 210px;
		margin-top: -5px;
		font-weight: 800;
		font-size: 14px;
    }
	

.grey
{
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.8);
}

section.articlesummary 
{
	background-image: url("/images/white-granite.jpg");
	margin-top: -15px;
}

.thumbnail
{
	display: inline-block;
	width: 170px;
	height: 100px;
	border-width: 5px;
	border-style: solid;
	border-radius: 10px;
	margin-top: -20px;
	object-fit: cover;
}

	
section.articlesummary:hover
{
		animation: pulse 2s linear infinite;
		-webkit-animation: pulse 1.0s linear infinite;
		-moz-animation: pulse 1.0s linear infinite;
		-ms-animation: pulse 1.0s linear infinite;
		-o-animation: pulse 1.0s linear infinite;		
}

.zoom 
{
	transition: transform .5s;  
}

.zoom:hover 
{
    -ms-transform: scale(1.2); /* IE 9 */
    -webkit-transform: scale(1.2); /* Safari 3-8 */
    transform: scale(1.2);
} 	
	
@keyframes pulse {
    0% { box-shadow: 0 0 5px 10px rgba(155,155,155, 0.6); }
    50% { box-shadow: 0 0 10px 10px rgba(155,155,155, 0.6);}
    100% { box-shadow: 0 0 15px 10px rgba(155,155,155, 0.6); }
}	
	
@-webkit-keyframes pulse {
    0% { box-shadow: 0 0 5px 10px rgba(155,155,155, 0.6); }
    50% { box-shadow: 0 0 10px 10px rgba(155,155,155, 0.6); }
    100% { box-shadow: 0 0 15px 10px rgba(155,155,155, 0.6); }
}	
	h3 
	{
		font-size: 24px;
		font-weight: 900;
		margin-top: -3px;
	}
		
	h3#bct
	{
		font-size: 18px;
		font-weight: 900;
	}
		
	
/* -----------FOOTER SECTION -------------------------------------------------- */
	
footer 
{
	font-size: 40px;
	font-weight: 900;
	color: #fcfcfc;
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.8);
	margin: auto;
}
/* --------- -H TAGS --------------------------------------------------- */
	
h1 , h2 , H3
{
	text-shadow: 12px 6px 6px rgba(163, 179, 179, 0.8);
}
	
h2
{
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.8);
	font-size: 40px;
	font-weight: 2000;
}
	
h1 
{
	font-size: 60px;
	font-weight: 2000;
	margin-top: 0px;
	margin-bottom: 0px;
}

h1.main-title
{
	font-size: 60px;	
}
	
h1.subtitle	
{
	font-style: italic;
	font-size: 40px;
}
	
h3 
{
	font-size: 24px;
	font-weight: 2000;
	margin-top: -3px;
}
	
h3.bct
{
	font-size: 22px;
	font-weight: 2000;
}

h3.benes
{
	font-size: 42px;
	font-weight: 9000;
}

.whiten
{
	color: white;
}

} /* end of this size --- */

/*------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------*/

/*------------------------- Extra Small Devices and Phones ---------------------------------------*/
@media only screen and (min-width: 1024px)

{

.container
{
	
		min-height:100%;
		 width: 1020px;
		 margin:auto;

	
    	display: grid;
		grid-template-columns:1020px;
		grid-template-rows:  auto; 
		-moz-column-gap: 5px;
		column-gap: 5px;
		-moz-row-gap: 10px;	
		row-gap: 10px;		
}


*------GRID LAYOUT ----------------------------*/

@supports (display: grid) 
{
  main 
  { 
    max-width: 100%;
    margin: 0;
  }
 
  .header-grid 
  {
    max-width: 90%;
    margin: 0;
    margin-bottom:.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: .5rem;
    font-family: Avenir, Roboto, Helvetica, san-serif; 
  }
}
  
.grid-part
{
  display: flex;
  flex-flow: column;
  align-self: center;
  text-align: center;
}

.grid-part > h1 
{
  margin: 1rem 1rem 0;
  font-size:calc(22px + 3.6vw);
  line-height: .9em;
}

.grid-part > img 
{
  max-width: calc(70% + 3vw);
  max-height: calc(70% + 3vw);
}

.grid-part  .main-heading-pic
{
  max-width: calc(80% + 4.0vw); 
  margin-left:-30px;
}

#quote
{
	font-size: calc(14px + 1vw);
	color: white;
	font-weight: 600;
	font-style: italic;
	text-shadow: 8px 5px 5px rgba(163, 179, 179, .8);
	padding: 3px;
}
/* ------- NAVIGATION ROW-------------------------------------------------- */
	
a.nav-button:hover 
{
	background-image: url("/images/cream-granite-small.jpg");
	border-radius: 4px;
	color: #000000;	
}
	
nav ul
{
display: block;
	width: 100%;
	text-align: center;
	margin: auto;
	position: relative;
}

nav ul li
{
	white-space: nowrap;
	text-decoration: none;
	width: 25%;
	display: inline-block;
	margin-left:10px;
	margin-right:10px;
	padding-left:2px;
	padding-right: 2px;	
	
}
	
nav ul li a 
{
	font-size: 22px;
	font-weight: 900;
	color: #565252;
	text-decoration: none;
	border-width: 4px;
	border-style: solid;
	border-radius: 10px;
	width:100%;
	text-align:center;
	display: block;
	background-image: url("/images/white-granite-small.jpg");
	padding:2px;
	margin:1px;
	text-shadow: 5px 5px 5px rgba(163, 179, 179, 0.8);
	box-shadow: 10px 10px 5px rgba(155, 155, 155, .4);
}

.DC
{
    font-size: 21px;
}

.PTS
{
    font-size: 20px;
}

/* ---------INTRO SECTION ---------------------------------------------------- */

section.intro .hidepic 
{
   display: unset;
}


.eliminate
{
		display: unset;
}


section.intro
{
	display: block;
	position: relative;
	text-align: center;
	color:white;
	align-items: center;
	margin-left: -5px;
	width: 100%;
}

section.intro img
{
	display: inline-block;  
}


img.thumbnail2
{
	display: inline-block;
	width: 132px;
	height: 132px;
	border-width: 4px;
	border-style: solid;
	object-fit: cover;
	box-shadow: 12px 12px 12px rgba(155, 155, 155, .6);
	transition: box-shadow 0.3s ease-in-out;
}


img.thumbnail2 img 
{
    max-width: 100%;
    max-height: 100%;
}
	
h2.bottom-left 
{
    position: absolute;
    bottom: -24%;
    left: 11%;
}


h2.top-left 
{
    position: absolute;
    top: -24%;
    left:11%;
}


h2.top-right 
{
    position: absolute;
    top: -24%;
    right: 11%;
}


h2.bottom-right 
{
    position: absolute;
    bottom: -24%;
    right: 11%;
}


h1.centered 
{
     position: absolute;
    top: 35%;
    right: 41%;
}	

/*----------ARTICLE SECTION -----------------------------------------------------------------------------------*/
	
article
{	
	background-image: url("/images/white-granite.jpg");
	background-size: 100%;
	font: normal 19px 'Bitter', serif;
	line-height: 1.5; 
	padding: 30px;
	width:95%;
	height: auto;
}

	.article-subsection
	{
		float: none;
		text-align: justify;
		text-justify: inter-word;
	}	
	
	li.benefits
	{
	list-style-type: circle solid;	
	font-size: 32px;
	margin-left: 50px;
	width: 90%;
	
	}
	
	h2
	{
		color: black;
	}
	
	h2 span
	{
		color: red;
	}
	
	div.paragraph
	{
		text-indent: 30px;
	}
	figure
	{
	    width: 280px;
	    object-fit: cover;
		text-align: center;
		overflow: auto;
		display: block;
		margin: 5px;
		box-shadow: 6px 6px 3px rgba(155, 155, 155, .4);
		transition: box-shadow 0.3s ease-in-out;
		
	}
	
	figure.picture-float-left
	{
	    float: left;
	}
	
	figure.picture-float-right
	{
	    float: right;
	}


	div#no-left
	{
		float: right;
		clear: left;
		 
	}
	
	div#no-right
	{
		 float: right;
		 clear: right;
	}
	

	figcaption
	{
		display: block;
		font-weight: 600;
		font-size: 18px;
		font-style: italic;
		width: 250px;
		margin: auto;
		text-align: center;	
	}
	
	figure
	{
		padding: 0px;
		text-align: center;	
		display: inline-block;
	
	}
	
	figure img
	{
		width: 250px;
		height: 225px;
	}
	

	.footnotes
	{
		font-size: 14px;
	}

	
	ol li
	{
		font-size: 24px;
		text-indent: 15px;
	}
	
	ol
	{
		margin-left: 50px;
		margin-right: 75px;
	}
	
/* -------------------- ARTICLES BOXES --------------------------------------- */	

section.articleslisting
{
	align-items: center;
	vertical-align:top;
	margin-bottom: 10px;
	margin-top:40px;
	display: block;
}


section.articlesummary
{
	width: 290px;
	height: 290px;
	display: inline-block; 
	border-width: 5px;
	border-style: solid;
	border-radius: 10px;
	box-shadow: 15px 15px 7px rgba(155, 155, 155, .4);
	transition: box-shadow 0.3s ease-in-out;
	position: relative;
	margin: 25px 15px 25px 15px;
	vertical-align:top;
	text-align: center;	
}

	.articleblurb 
	{
        white-space: normal;
        width: 280px;
		margin-top: -5px;
		font-weight: 800;
		font-size: 18px;
    }

.grey
{
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.8);
}

section.articlesummary 
{
	background-image: url("/images/white-granite.jpg");
	margin-top: -15px;
}

.thumbnail
{
	display: inline-block;
	width: 240px;
	height: 150px;
	border-width: 5px;
	border-style: solid;
	border-radius: 10px;
	margin-top: -15px;
	object-fit: cover;
}

	
section.articlesummary:hover
{
		animation: pulse 2s linear infinite;
		-webkit-animation: pulse 1.0s linear infinite;
		-moz-animation: pulse 1.0s linear infinite;
		-ms-animation: pulse 1.0s linear infinite;
		-o-animation: pulse 1.0s linear infinite;		
}

.zoom 
{
	transition: transform .5s;  
}

.zoom:hover 
{
    -ms-transform: scale(1.2); /* IE 9 */
    -webkit-transform: scale(1.2); /* Safari 3-8 */
    transform: scale(1.2);
} 	
	
@keyframes pulse {
    0% { box-shadow: 0 0 5px 10px rgba(155,155,155, 0.6); }
    50% { box-shadow: 0 0 10px 10px rgba(155,155,155, 0.6);}
    100% { box-shadow: 0 0 15px 10px rgba(155,155,155, 0.6); }
}	
	
@-webkit-keyframes pulse {
    0% { box-shadow: 0 0 5px 10px rgba(155,155,155, 0.6); }
    50% { box-shadow: 0 0 10px 10px rgba(155,155,155, 0.6); }
    100% { box-shadow: 0 0 15px 10px rgba(155,155,155, 0.6); }
}

	
	h3 
	{
		font-size: 28px;
		font-weight: 900;
		margin-top: -3px;
	}
		
	h3#bct
	{
		font-size: 24px;
		font-weight: 900;
		margin-bottom: 30px;
	}
		
/* -----------FOOTER SECTION -------------------------------------------------- */
	
footer 
{
	font-size: 40px;
	font-weight: 900;
	color: #fcfcfc;
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.8);
	margin: auto;
}
/* --------- -H TAGS --------------------------------------------------- */
	
h1 , h2 , H3
{
	text-shadow: 12px 6px 6px rgba(163, 179, 179, 0.8);
}
	
h2
{
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.8);
	font-size: 40px;
	font-weight: 2000;
}
	
h1 
{
	font-size: 60px;
	font-weight: 2000;
	margin-top: 0px;
	margin-bottom: 0px;
}

h1.main-title
{
	font-size: 60px;	
}
	
h1.subtitle	
{
	font-style: italic;
	font-size: 40px;
}
	
h3 
{
	font-size: 24px;
	font-weight: 2000;
	margin-top: -3px;
}
	
h3.bct
{
	font-size: 22px;
	font-weight: 2000;
}

h3.benes
{
	font-size: 42px;
	font-weight: 9000;
}

.whiten
{
	color: white;
}

} /* end of this size --- */

/*------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------*/

/*------------------------- Extra Small Devices and Phones ---------------------------------------*/
@media only screen and (min-width: 1440px)

{

.container
{
	
	 min-height:100%;
	 width: 1435px;

	
	display: grid;
		grid-template-columns:1435px;
		grid-template-rows:  auto; 
		-moz-column-gap: 5px;
		column-gap: 5px;
		-moz-row-gap: 10px;	
		row-gap: 10px;	
}


/*------GRID LAYOUT ----------------------------*/

@supports (display: grid) 
{
  main 
  { 
    max-width: 100%;
    margin: 0;
  }
 
  .header-grid 
  {
    max-width: 90%;
    margin: 0;
    margin-bottom:.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: .5rem;
    font-family: Avenir, Roboto, Helvetica, san-serif; 
  }
}
  
.grid-part
{
  display: flex;
  flex-flow: column;
  padding: 0rem;
  align-self: center;
  text-align: center;
}

.grid-part > h1 
{
  margin: 1rem 1rem 0;
  font-size:calc(36px + 3.6vw);
  line-height: .9em;
}

.grid-part > img 
{
  max-width: calc(70% + 3.2vw);
  max-height: calc(70% + 3.2vw) ;
}

.grid-part  .main-heading-pic
{
  max-width: calc(80% + 3.0vw); 
  margin-left:-50px;
}

#quote
{
	font-size: calc(20px + 1vw);
	color: white;
	font-weight: 600;
	font-style: italic;
	text-shadow: 8px 5px 5px rgba(163, 179, 179, .8);
	padding: 3px;
}
/* ------- NAVIGATION ROW-------------------------------------------------- */
	
nav ul
{
	display: block;
	width: 100%;
	text-align: center;
	margin-left: 35px;
}

nav ul li
{
	white-space: nowrap;
	text-decoration: none;
	width: auto;
	display: inline-block;
	margin-left:10px;
	margin-right:10px;
	padding-left:5px;
	padding-right: 5px;	
	
}
	
nav ul li a 
{
	float: center;
	font-size: 18px;
	font-weight: 900;
	color: #565252;
	text-decoration: none;
	border-width: 4px;
	border-style: solid;
	border-radius: 8px;
	width:100%;
	text-align:center;
	display: block;
	background-image: url("/images/white-granite-small.jpg");
	padding:3px;
	margin:1px;
	text-shadow: 5px 5px 5px rgba(163, 179, 179, 0.8);
	box-shadow: 10px 10px 5px rgba(155, 155, 155, .4);
}


/* ---------INTRO SECTION ---------------------------------------------------- */

section.intro .hidepic 
{
   display: unset;
}

.eliminate
{
		display: unset;
}


section.intro
{
	display: block;
	position: relative;
	text-align: center;
	color:white;
	align-items: center;
	margin-left: -5px;
	width: 100%;
}

section.intro img
{
	display: inline-block;  
}


img.thumbnail2
{
	display: inline-block;
	width: 230px;
	height: 230px;
	border-width: 4px;
	border-style: solid;
	object-fit: cover;
	box-shadow: 12px 12px 12px rgba(155, 155, 155, .6);
	transition: box-shadow 0.3s ease-in-out;
}


img.thumbnail2 img 
{
    max-width: 100%;
    max-height: 100%;
}
	
h2.bottom-left 
{
    position: absolute;
    bottom: -35px;
    left: 66px;
}


h2.top-left 
{
    position: absolute;
    top: -35px;
    left: 66px;
}


h2.top-right 
{
    position: absolute;
    top: -35px;
    right: 69px;
}


h2.bottom-right 
{
    position: absolute;
    bottom: -24px;
    right: 69px;
}


h1.centered 
{
     position: absolute;
    top: 65px;
    right: 535px;
}	

/*----------ARTICLE SECTION -----------------------------------------------------------------------------------*/
	
article
{	
	background-image: url("/images/white-granite.jpg");
	background-size: 100%;
	font: normal 19px 'Bitter', serif;
	line-height: 1.5; 
	padding: 30px;
	width:95%;
	height: auto;
}

	.article-subsection
	{
		float: none;
		text-align: justify;
		text-justify: inter-word;
	}	
	
	li.benefits
	{
	list-style-type: circle solid;	
	font-size: 32px;
	margin-left: 50px;
	width: 90%;
	
	}
	
	h2
	{
		color: black;
	}
	
	h2 span
	{
		color: red;
	}
	
	div.paragraph
	{
		text-indent: 30px;
	}
	
	figure
	{
	    width: 285px;
	    object-fit: cover;
		text-align: center;
		overflow: auto;
		display: block;
		margin: 5px;
		box-shadow: 6px 6px 3px rgba(155, 155, 155, .4);
		transition: box-shadow 0.3s ease-in-out;
		
	}
	
	figure.picture-float-left
	{
	    float: left;
	}
	
	figure.picture-float-right
	{
	    float: right;
	}


	div#no-left
	{
		float: right;
		clear: left;
		 
	}
	
	div#no-right
	{
		 float: right;
		 clear: right;
	}
	

	figcaption
	{
		display: block;
		font-weight: 600;
		font-size: 18px;
		font-style: italic;
		width: 275px;
		margin: auto;
		text-align: center;	
	}
	figure
	{
		padding: 0px;
		text-align: center;	
		display: inline-block;
	
	}
	
	figure img
	{
		width: 275px;
		height: 250px;
	}
	


	.footnotes
	{
		font-size: 14px;
	}

	
	ol li
	{
		font-size: 24px;
		text-indent: 15px;
	}
	
	ol
	{
		margin-left: 50px;
		margin-right: 75px;
	}
/* -----------FOOTER SECTION -------------------------------------------------- */
	
footer 
{
	font-size: 40px;
	font-weight: 900;
	color: #fcfcfc;
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.8);
	margin: auto;
}
/* --------- -H TAGS --------------------------------------------------- */
	
h1 , h2 , H3
{
	text-shadow: 10px 5px 5px rgba(163, 179, 179, 0.6);
}
	
h2
{
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.6);
	font-size: 60px;
	font-weight: 2000;
}
	
h1 
{
	font-size: 80px;
	font-weight: 2000;
	margin-top: 0px;
	margin-bottom: 0px;
}

h1.main-title
{
	font-size: 80px;	
}
	
h1.subtitle	
{
	font-style: italic;
	font-size: 40px;
}
	
h3 
{
	font-size: 24px;
	font-weight: 2000;
	margin-top: -3px;
}
	
h3.bct
{
	font-size: 22px;
	font-weight: 2000;
}

h3.benes
{
	font-size: 36px;
	font-weight: 9000;
}

.whiten
{
	color: white;
}

} /* end of this size --- */

/*------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------*/

/*------------------------- Large screen devices ---------------------------------------*/
@media only screen and (min-width: 1680px)

{

.container
{
	
min-height:100%;
	 width: 1670px;

	
	display: grid;
		grid-template-columns:1670px;
		grid-template-rows:  auto; 
		-moz-column-gap: 5px;
		column-gap: 5px;
		-moz-row-gap: 15px;	
		row-gap: 15px;	
}


/*------GRID LAYOUT ----------------------------*/

@supports (display: grid) 
{
  main 
  { 
    max-width: 100%;
    margin: 0;
  }
 
  .header-grid 
  {
    max-width: 90%;
    margin: 0;
    margin-bottom:.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: .5rem;
    font-family: Avenir, Roboto, Helvetica, san-serif; 
  }
}
  
.grid-part
{
  display: flex;
  flex-flow: column;
  padding: 0rem;
  align-self: center;
  text-align: center;
}

.grid-part > h1 
{
  margin: 1rem 1rem 0;
  font-size:calc(40px + 3.6vw);
  line-height: .9em;
}

.grid-part > img 
{
  max-width: calc(70% + 3.2vw);
  max-height: calc(70% + 3.2vw) ;
}

.grid-part  .main-heading-pic
{
  max-width: calc(80% + 3.0vw); 
  margin-left:-50px;
}

#quote
{
	font-size: calc(16px + 1vw);
	color: white;
	font-weight: 600;
	font-style: italic;
	text-shadow: 8px 5px 5px rgba(163, 179, 179, .8);
	padding: 3px;
}


/* ------- NAVIGATION ROW-------------------------------------------------- */
	
a.nav-button:hover 
{
	background-image: url("/images/cream-granite-small.jpg");
	border-radius: 4px;
	color: #000000;	
}
	
nav ul
{
display: block;
	width: 100%;
	text-align: center;
	margin: auto;
	position: relative;
}

nav ul li
{
	white-space: nowrap;
	text-decoration: none;
	width: auto;
	display: inline-block;
	margin-left:10px;
	margin-right:10px;
	padding-left:5px;
	padding-right: 5px;	
	
}
	
nav ul li a 
{
	float: center;
	font-size: 28px;
	font-weight: 900;
	color: #565252;
	text-decoration: none;
	border-width: 4px;
	border-style: solid;
	border-radius: 10px;
	width:100%;
	text-align:center;
	display: block;
	background-image: url("/images/white-granite-small.jpg");
	padding:4px;
	margin:1px;
	text-shadow: 5px 5px 5px rgba(163, 179, 179, 0.8);
	box-shadow: 10px 10px 5px rgba(155, 155, 155, .4);
}


/* ---------INTRO SECTION ---------------------------------------------------- */

section.intro .hidepic 
{
   display: unset;
}

.eliminate
{
		display: unset;
}

section.intro
{
	display: block;
	position: relative;
	text-align: center;
	color:white;
	align-items: center;
	margin-left: -5px;
	width: 100%;
}

section.intro img
{
	display: inline-block;  
}


img.thumbnail2
{
	display: inline-block;
	width: 260px;
	height: 260px;
	border-width: 4px;
	border-style: solid;
	object-fit: cover;
	box-shadow: 16px 16px 12px rgba(155, 155, 155, .8);
	transition: box-shadow 0.3s ease-in-out;
}


img.thumbnail2 img 
{
    max-width: 100%;
    max-height: 100%;
}
	
h2.bottom-left 
{
    position: absolute;
    bottom: -55px;
    left: 86px;
}


h2.top-left 
{
    position: absolute;
    top: -55px;
    left: 86px;
}


h2.top-right 
{
    position: absolute;
    top: -55px;
    right: 86px;
}


h2.bottom-right 
{
    position: absolute;
    bottom: -45px;
    right: 86px;
}


h1.centered 
{
     position: absolute;
    top: 90px;
    right: 645px;
}	

/*----------ARTICLE SECTION -----------------------------------------------------------------------------------*/
	
article
{	
	background-image: url("/images/white-granite.jpg");
	background-size: 100%;
	font: normal 22px 'Bitter', serif;
	line-height: 1.5; 
	padding: 30px;
	width:95%;
	height: auto;
}

	.article-subsection
	{
		float: none;
		text-align: justify;
		text-justify: inter-word;
	}	
	
	li.benefits
	{
	list-style-type: circle solid;	
	font-size: 32px;
	margin-left: 50px;
	width: 90%;
	
	}
	
	h2
	{
		color: black;
	}
	
	h2 span
	{
		color: red;
	}
	
	div.paragraph
	{
		text-indent: 30px;
	}
		figure
	{
	    width: 335px;
	    object-fit: cover;
		text-align: center;
		overflow: auto;
		display: block;
		margin: 5px;
		box-shadow: 6px 6px 3px rgba(155, 155, 155, .4);
		transition: box-shadow 0.3s ease-in-out;
		
	}
	
	figure.picture-float-left
	{
	    float: left;
	}
	
	figure.picture-float-right
	{
	    float: right;
	}


	div#no-left
	{
		float: right;
		clear: left;
		 
	}
	
	div#no-right
	{
		 float: right;
		 clear: right;
	}
	

	figcaption
	{
		display: block;
		font-weight: 600;
		font-size: 20px;
		font-style: italic;
		width: 300px;
		margin: auto;
		text-align: center;	
	}
	
	figure
	{
		padding: 0px;
		text-align: center;	
		display: inline-block;
	
	}
	
	figure img
	{
		width: 300px;
		height: 275px;
	}
	


	.footnotes
	{
		font-size: 14px;
	}

    img#first
    {
        width: 300px;
        height: 275px;
    }
	
	ol li
	{
		font-size: 24px;
		text-indent: 15px;
	}
	
	ol
	{
		margin-left: 50px;
		margin-right: 75px;
	}
/* -----------FOOTER SECTION -------------------------------------------------- */
	
footer 
{
	font-size: 40px;
	font-weight: 900;
	color: #fcfcfc;
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.8);
	margin: auto;
}
/* --------- -H TAGS --------------------------------------------------- */
	
h1 , h2 , H3
{
	text-shadow: 15px 10px 10px rgba(163, 179, 179, 0.6);
}
	
h2.top-left, h2.top-right, h2.bottom-left, h2.bottom-right
{
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.6);
	font-size: 60px;
	font-weight: 900;
}
	
h1.centered 
{
	font-size: 80px;
	font-weight: 900;
	margin-top: 0px;
	margin-bottom: 0px;
}

h1.main-title
{
	font-size: 80px;	
}
	
h1.subtitle	
{
	font-style: italic;
	font-size: 40px;
}
	
h3 
{
	font-size: 24px;
	font-weight: 2000;
	margin-top: -3px;
}
	
h3.bct
{
	font-size: 22px;
	font-weight: 2000;
}

h3.benes
{
	font-size: 36px;
	font-weight: 9000;
}

.whiten
{
	color: white;
}

} /* end of this size --- */

/*------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------*/

/*------------------------- Large screen devices ---------------------------------------*/
@media only screen and (min-width: 1920px)

{

.container
{
	
	min-height:100%;
	 width: 1910px;

	
	display: grid;
		grid-template-columns:1910px;
		grid-template-rows:  auto; 
		-moz-column-gap: 5px;
		column-gap: 5px;
		-moz-row-gap: 15px;	
		row-gap: 15px;	
}


/*------GRID LAYOUT ----------------------------*/

@supports (display: grid) 
{
  main 
  { 
    max-width: 100%;
    margin: 0;
  }
 
  .header-grid 
  {
    max-width: 90%;
    margin: 0;
    margin-bottom:0rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: .5rem;
    font-family: Avenir, Roboto, Helvetica, san-serif; 
  }
}
  
.grid-part
{
  display: flex;
  flex-flow: column;
  padding: 0rem;
  align-self: center;
  text-align: center;
}

.grid-part > h1 
{
  margin: 1rem 1rem 0;
  font-size:calc(34px + 3.6vw);
  line-height: .9em;
}

.grid-part > img 
{
  max-width: calc(70% + 3.2vw);
  max-height: calc(70% + 3.2vw) ;
}

.grid-part  .main-heading-pic
{
  max-width: calc(80% + 3.0vw); 
  margin-left:-50px;
}

#quote
{
	font-size: calc(18px + 1vw);
	color: white;
	font-weight: 600;
	font-style: italic;
	text-shadow: 8px 5px 5px rgba(163, 179, 179, .8);
	padding: 3px;
}


/* ------- NAVIGATION ROW-------------------------------------------------- */
	
a.nav-button:hover 
{
	background-image: url("/images/cream-granite-small.jpg");
	border-radius: 4px;
	color: #000000;	
}
	
nav ul
{
	display: block;
	width: 100%;
	text-align: center;
	margin: auto;
	position: relative;
}

nav ul li
{
	white-space: nowrap;
	text-decoration: none;
	width: auto;
	display: inline-block;
	margin-left:10px;
	margin-right:10px;
	padding-left:5px;
	padding-right: 5px;	
	
}
	
nav ul li a 
{
	float: center;
	font-size: 28px;
	font-weight: 900;
	color: #565252;
	text-decoration: none;
	border-width: 4px;
	border-style: solid;
	border-radius: 10px;
	width:100%;
	text-align:center;
	display: block;
	background-image: url("/images/white-granite-small.jpg");
	padding:4px;
	margin:1px;
	text-shadow: 5px 5px 5px rgba(163, 179, 179, 0.8);
	box-shadow: 10px 10px 5px rgba(155, 155, 155, .4);
}


/* ---------INTRO SECTION ---------------------------------------------------- */

section.intro .hidepic 
{
   display: unset;
}

.eliminate
{
		display: unset;
}


section.intro
{
	display: block;
	position: relative;
	text-align: center;
	color:white;
	align-items: center;
	margin-left: -5px;
	width: 100%;
}

section.intro img
{
	display: inline-block;  
}


img.thumbnail2
{
	display: inline-block;
	width: 260px;
	height: 260px;
	border-width: 4px;
	border-style: solid;
	object-fit: cover;
	box-shadow: 16px 16px 12px rgba(155, 155, 155, .8);
	transition: box-shadow 0.3s ease-in-out;
}


img.thumbnail2 img 
{
    max-width: 100%;
    max-height: 100%;
}
	
h2.bottom-left 
{
    position: absolute;
    bottom: -55px;
    left: 186px;
}


h2.top-left 
{
    position: absolute;
    top: -55px;
    left: 186px;
}


h2.top-right 
{
    position: absolute;
    top: -55px;
    right: 186px;
}


h2.bottom-right 
{
    position: absolute;
    bottom: -45px;
    right: 186px;
}


h1.centered 
{
     position: absolute;
    top: 90px;
    right: 755px;
}	

/*----------ARTICLE SECTION -----------------------------------------------------------------------------------*/
	
article
{	
	background-image: url("/images/white-granite.jpg");
	background-size: 100%;
	font: normal 26px 'Bitter', serif;
	line-height: 1.5; 
	padding: 30px;
	width:95%;
	height: auto;
}

	.article-subsection
	{
		float: none;
		text-align: justify;
		text-justify: inter-word;
	}	
	
	li.benefits
	{
	list-style-type: circle solid;	
	font-size: 32px;
	margin-left: 50px;
	width: 90%;
	
	}
	
	h2
	{
		color: black;
	}
	
	h2 span
	{
		color: red;
	}
	
	div.paragraph
	{
		text-indent: 30px;
	}
	
	figure
	{
	    width: 390px;
	    object-fit: cover;
		text-align: center;
		overflow: auto;
		display: block;
		margin: 5px;
		box-shadow: 6px 6px 3px rgba(155, 155, 155, .4);
		transition: box-shadow 0.3s ease-in-out;
		
	}
	
	figure.picture-float-left
	{
	    float: left;
	}
	
	figure.picture-float-right
	{
	    float: right;
	}


	div#no-left
	{
		float: right;
		clear: left;
		 
	}
	
	div#no-right
	{
		 float: right;
		 clear: right;
	}
	

	figcaption
	{
		display: block;
		font-weight: 600;
		font-size: 24px;
		font-style: italic;
		width: 350px;
		margin: auto;
		text-align: center;	
	}
	figure
	{
		padding: 0px;
		text-align: center;	
		display: inline-block;
	
	}
	
	figure img
	{
		width: 350px;
		height: 350px;
	}
	


	.footnotes
	{
		font-size: 14px;
	}

    img#first
    {
        width: 350px;
        height: 300px;
    }
	
	ol li
	{
		font-size: 24px;
		text-indent: 15px;
	}
	
	ol
	{
		margin-left: 50px;
		margin-right: 75px;
	}
/* -----------FOOTER SECTION -------------------------------------------------- */
	
footer 
{
	font-size: 40px;
	font-weight: 900;
	color: #fcfcfc;
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.8);
	margin: auto;
}
/* --------- -H TAGS --------------------------------------------------- */
	
h1 , h2 , H3
{
	text-shadow: 15px 10px 10px rgba(163, 179, 179, 0.6);
}
	
h2.top-left, h2.top-right, h2.bottom-left, h2.bottom-right
{
	text-shadow: 7px 4px 4px rgba(163, 179, 179, 0.6);
	font-size: 60px;
	font-weight: 900;
}
	
h1.centered 
{
	font-size: 80px;
	font-weight: 900;
	margin-top: 0px;
	margin-bottom: 0px;
}

h1.main-title
{
	font-size: 80px;	
}
	
h1.subtitle	
{
	font-style: italic;
	font-size: 40px;
}
	
h3 
{
	font-size: 24px;
	font-weight: 2000;
	margin-top: -3px;
}
	
h3.bct
{
	font-size: 22px;
	font-weight: 2000;
}

h3.benes
{
	font-size: 36px;
	font-weight: 9000;
}

.whiten
{
	color: white;
}

} /* end of this size --- */