/* CSS Document */

/* Start Column 100% -------------------------------------------------------*/
* 	
		{
				box-sizing: border-box;
		}

/* Create two equal columns that floats next to each other */
.column100 
		{
				float: left;
				width: 100%;
				padding: 10px;
				height: 300px; /* Should be removed. Only for demonstration */
		}

/* Clear floats after the columns */
.row:after 
		{
				content: "";
				display: table;
				clear: both;
		}		

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) 
		{
.column100 
		{
				width: 100%;
  		}
		}

/* END Column 100% -------------------------------------------------------*/


/* Start Column 50% -------------------------------------------------------*/
* 	
		{
				box-sizing: border-box;
		}

/* Create two equal columns that floats next to each other */
.column50 
		{
				float: left;
				width: 50%;
				padding: 10px;
		}

/* Clear floats after the columns */
.row:after 
		{
			   content: "";
			   display: table;
			   clear: both;
		}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) 

		{
.column50 
		{
				width: 100%;
 		}
		}

/* END Column 50% -------------------------------------------------------*/


/* Start Column 33% -------------------------------------------------------*/
* 	
		{
				box-sizing: border-box;
		}

/* Create two equal columns that floats next to each other */
.column33 
		{
				float: left;
				width: 33.33%;
				padding: 10px;
				height: 300px; /* Should be removed. Only for demonstration */
		}

/* Clear floats after the columns */
.row:after 
		{
			   content: "";
			   display: table;
			   clear: both;
		}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) 
		{
.column33 
		{
				width: 100%;
		}
		}

.responsive 
		{
				max-width: 100%;
				height: auto;
		}
/* END Column 33% -------------------------------------------------------*/


/* Start Column 25% -------------------------------------------------------*/
* 	
		{
				box-sizing: border-box;
		}

/* Create two equal columns that floats next to each other */
.column25 
		{
				float: left;
				width: 25%;
				padding: 10px;
				height: 300px; /* Should be removed. Only for demonstration */
		}

/* Clear floats after the columns */
.row:after 
		{
				content: "";
				display: table;
				clear: both;
		}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) 
		{
.column25 
		{
				width: 100%;
		}
		}

.responsive 
		{
				max-width: 100%;
				height: auto;
		}
/* END Column 25% -------------------------------------------------------*/


.title
		{
				font-family: 'AlegreyaSans-Regular', 'OpenSans-Regular';
				font-size: 15pt;
				font-weight: normal;
				font-style: normal;
				height: auto;
				line-height: 1.5;
				padding-top: 0px;
				padding-bottom: 0px;
				padding-left: 10px;
				padding-right: 10px;
				text-align: left;
				text-decoration: bold;	
		}			
	
				
.pill-nav a 
		{
				display: inline-block;
				color: black;
				text-align: center;
				padding: 14px;
				text-decoration: none;
				font-size: 17px;
				border-radius: 5px;
		}


.pill-nav a:hover 
		{
				background-color: #dddddd;
				color: black;
		}


.pill-nav a.active 
		{
				background-color: dodgerblue;
				color: white;
		}	
				
.padding0
		{
				border: none;
				padding-top: 20px;
				padding-bottom: 20px;
				padding-left: 0px;
				padding-right: 0px;
				text-decoration: none;
		}

						
.padding20
		{
				border: none;
				padding-top: 20px;
				padding-bottom: 20px;
				padding-left: 20px;
				padding-right: 20px;
				text-decoration: none;
		}

				
/* SHOP Button Start*/	
.button_index {
			  background-color: #66CCFF;
			  border: black;
			  color: black;
			  padding: 10px 20px;
			  text-align: center;
			  text-decoration: none;
			  display: inline-block;
			  margin: 4px 2px;
			  cursor: pointer;
			  border-radius: 16px;
		}

.button_index:hover 
		{
			 background-color: #CCCCCC;
		}
/* SHOP Button End*/	


/* Learn More Button Start*/	
.button_index {
			  background-color: #66CCFF;
			  border: black;
			  color: black;
			  padding: 10px 15px;
			  text-align: center;
			  text-decoration: none;
			  display: inline-block;
			  margin: 4px 2px;
			  cursor: pointer;
			  border-radius: 16px;
		}

.button_index:hover 
		{
			 background-color: #CCCCCC;
		}
/* Learn More Button End*/	


/* BlackBox Start*/	
#blackbox 		
		{
				border: 1px solid;
				padding-top: 5px;
				padding-bottom: 5px;
				padding: 10px;
				box-shadow: 5px 5px #888888;
		}
/* BlackBox End*/	


div.scroll-container 
		{
				background-color: #ffffff;
				overflow: auto;
				white-space: nowrap;
				padding: 10px;
		}

div.scroll-container img 
		{
  				padding: 10px;
		}

/* Main TOP PAGE BANNER*/	
.bannerrow 
		{
				background-color: #FF0000; /* Set background color  old #ff751a*/
				color: white; /* Set text color */
				padding: 10px; /* Add padding for content */
				text-align: center; /* Center align text */
				border: 0; /* Remove border */
				height: auto;
				padding-top: 10px;
				padding-bottom: 10px;
				padding-left: 10px;
				padding-right: 10px;
				text-align: center;
				text-decoration: none;	
		}

/* Responsive styling */
@media (max-width: 800px) 
		{
.bannerrow 
		{
            	padding: 10px; /* Reduce padding for smaller screens */
        }
    	}
		
		
h1 {
  display: block;
  font-size: 2em;
  margin-before: 0.67em;
  margin-after: 0.67em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}


h2 {
  display: block;
  font-size: 1.5em;
  margin-before: 0.83em;
  margin-after: 0.83em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}


h3 {
  display: block;
  font-size: 1.17em;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}


h4 {
  display: block;
  margin-before: 1.33em;
  margin-after: 1.33em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}


h5 {
  display: block;
  font-size: .83em;
  margin-before: 1.67em;
  margin-after: 1.67em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}


h6 {
  display: block;
  font-size: .67em;
  margin-before: 2.33em;
  margin-after: 2.33em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}