@import url(font-awesome.min.css);
@import url('https://fonts.googleapis.com/css?family=Fondamento|Open+Sans:400,700&display=swap');

/* Grid Layout and Viewports */

.grid-container {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-rows: 240px 38px 1fr 60px;
  grid-gap: 0px;
  background-color: #000;
  padding: 1px;
}

@media screen and (max-width: 800px) {

.grid-container {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: 168px 38px 1fr 60px;
  grid-gap: 0px;
  background-color: #000000;
  padding: 1px;
  
	}

}


@media screen and (max-width: 480px) {

.grid-container {
	display: grid;
	grid-template-columns: 70px 1fr;
	grid-template-rows: 88px 38px 1fr 60px;
	grid-gap: 0px;
	background-color: #000000;
	padding: 1px;
	}

	}


/* .grid-container > div {
	
	background-color: rgba(255, 255, 255, 1);
	
	padding: 0 0;
 
} */

.topleft {
	grid-column: 1;
	grid-row: 1;
	background-color: #000000;
	background-image: url("../indexfiles/horselogotrans.gif"), url("../indexfiles/parchbg.jpg");
	background-position: center center, left top;
	background-repeat: no-repeat, repeat;
	background-size: contain, contain;
	padding: 2px;
}

.banner {
	grid-column: 2;
	grid-row: 1;
	background-color: #fff;
	background-image: url("../indexfiles/hhbanner.gif"), url("../indexfiles/parchbg.jpg");
	background-position: center center, left top;
	background-repeat: no-repeat, repeat-x;
	background-size: contain, contain;
	padding: 5px;
	justify-content: center;
}



 
	
.barmenu {
	grid-column: 1/span2;
	grid-row: 2;
	background-color: #000000;
	background-image: url("../indexfiles/gradfill.gif");
	background-position: left top;
	background-repeat: repeat-x;
	background-size: contain;
	padding: 0px;
}

 

.pagecontent {

	grid-column: 1/span2;
	grid-row: 3;
	background-color: #fff;
	padding: 30px 5px 30px 5px;
	}
	
	
	
.footer {
	grid-column: 1/span2;
	grid-row: 4;
	color: #fff;
	width: 100%;
	background-color: #000000;
	text-align: center;
	vertical-align: bottom;
	
	
}


[class*="col-"] {
  float: left;
  padding: 5px;
  
}

.col-10 {width: 10%;}

.col-17 {width: 17%;}

.col-33 {width: 33%;
		font-size: 0.8em;
		}
		
.col-66 {width: 66%;
		font-size: 0.9em;
		}
		
.col-80 {width: 80%;}

.col-100 {width: 100%;}

.col-qrt	{width: 25%;
			font-size: 0.8em;
			}
			
.col-hlf	{width: 50%;}


.row::after {
  content: "";
  clear: both;
  display: table;
}

/* Type */

	html {
		font-size: 16pt;
	}

		@media screen and (max-width: 1680px) {

			html {
				font-size: 13pt;
			}

		}

		@media screen and (max-width: 800px) {

			html {
				font-size: 11pt;
			}

		}

		@media screen and (max-width: 480px) {

			html {
				font-size: 9pt;
			}
			
			body {
				min-width: 305px;
		}
		}

	body, input, select, textarea {
		color: #000;
		font-family: 'Open Sans', "Source Sans Pro", sans-serif;
		font-weight: 300;
		font-size: 1rem;
		line-height: 1.65;
		background-color: #fff;
	
	}

	

		

	strong, b {
		color: #000;
		font-weight: 600;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 2rem 0;
	}

p.copyright {
	
	font-size: 0.9em;
	color: #fcc83b;
	margin: auto;
	
}	

h1, h2, h3, h4, h5, h6 {
	font-family: 'Fondamento';
	color: #000;
}


sup
	{
		position: relative;
		top: -0.4em;
		font-size: 0.9em;
	}
	
hr
	{
		border: 0;
		border-top: solid 2px #dad9d9;
		margin: 2em 0 2em 0;
	}

ul {
	list-style-type: none;
}



/* Image */

	.image {
		border-radius: 5px;
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image:before {
			
			
			background-image: url("../../images/overlay.png");
			background-color: rgba(64, 64, 64, 0.5);
			border-radius: 4px;
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		.image img {
			border-radius: 4px;
			display: block;
			padding: 10px 0 0 0;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			padding: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			padding: 0 0 1em 1.5em;
			top: 0.25em;
		}

		.image.fit {
			display: block;
			margin: 0 0 2rem 0;
			width: 100%;
		}

			.image.fit img {
				width: auto;
			}

		.image.main {
			display: block;
			margin: 2rem 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}

		@media screen and (max-width: 800px) {

			.image.main {
				margin: 1.5rem 0;
			}

		}

		@media screen and (max-width: 480px) {

			.image.main {
				margin: auto;
				width: 75%;
			}

		}
img{ max-width: 100%; height: auto; width: auto; }

.zoomleft img {
	  object-fit: contain;
	  
	  transition: transform 1.5s ease; /* Animation */
	  margin: 0;
	}

	.zoomleft:hover {
		transition: transform 1.5s ease;
		transform: scale(1.75); /* (225% zoom - Note: if the zoom is too large, it will go  outside of the viewport) */
		transform-origin: right top;
	  
	}
	
.zoomright img {
	  object-fit: contain;
	  
	  transition: transform 1.5s ease; /* Animation */
	  margin: 0;
	}

	.zoomright:hover {
		transition: transform 1.5s ease;
		transform: scale(1.75); /* (2.25x zoom - Note: if the zoom is too large, it will go  outside of the viewport) */
		transform-origin: left top;
	}
	
@media screen and (max-width: 480px) {
	
	.zoomleft img {
	  object-fit: contain;
	  transition: transform 1.5s ease; /* Animation */
	  margin: 0;
	}

	.zoomleft:hover {
		transition: transform 1.5s ease;
		transform: scale(2.25); /* (225% zoom - Note: if the zoom is too large, it will go  outside of the viewport) */
		transform-origin: right top;
	}
	
	.zoomright img {
		object-fit: contain;
	  	transition: transform 1.5s ease; /* Animation */
		margin: 0;
	}

	.zoomright:hover {
		transition: transform 1.5s ease;
		transform: scale(2.25); /* (2.25x zoom - Note: if the zoom is too large, it will go  outside of the viewport) */
		transform-origin: left top;
	}
}	

/* Table */

	.table-wrapper {
		overflow-x: auto;
	}

	table {
		margin: 0 0 2rem 0;
		width: auto;
		table-layout: fixed;
		
		
	}

		table tbody tr {
			border: solid 0px #000;
			border-left: 0;
			border-right: 0;
			margin: auto;
		}
		table tbody tr.barrow {
			border: solid 0px #ff0000;
			border-left: 0;
			border-right: 0;
		}
			table tbody tr:nth-child(2n + 1) {
				background-color: rgba(255, 255, 255, 0.075);
			}

		table td {
			padding: 0.75em 0.75em;
			vertical-align: middle;
			
		}
		table td.force {
			max-width: 300px;
			
		}
		table th {
			color: #000;
			font-size: 0.9em;
			font-weight: 600;
			padding: 2.5em 0.75em 0.25em 0.75em;
			text-align: left;
		}

		table thead {
			border-bottom: solid 2px #ffffff;
		}

		table tfoot {
			border-top: solid 2px #ffffff;
			justify-content: center;
			text-align: center;
		}

		table.alt {
			border-collapse: collapse;
			margin: 0 0 2rem 0;
			width: 100%;
			margin: auto;
			table-layout: fixed;
		}

			table.alt tbody tr td {
				border: solid 0px #000;
				border-left-width: 0;
				border-top-width: 0;
				text-align: center;
				justify-content: center;
				margin: auto;
			}

			td.alt {
				width: 33%;
			}	
				
		table.norm {
			border-collapse: separate;
			margin: 0 0 2rem 0;
			width: 100%;
			}

		table.norm tbody tr td {
				border: solid 0px #ffffff;
				border-left-width: 0;
				border-top-width: 0;
			}
			table.norm tbody tr td:first-child {
					border-left-width: 1px;
				}

			table.norm tbody tr:first-child td {
				border-top-width: 1px;
			}
				
		table.norm td.emph {
			color: #FF9933;
			font-weight: 600;
			}
		table.norm th {
			color: #ffffff;
			font-size: 0.9em;
			font-weight: 600;
			padding: 0 0.75em 0.75em 0.75em;
			text-align: left;
			}

		table.norm thead {
			border-bottom: 0;
			}

		table.norm tfoot {
			border-top: 0;
			}

table.badges {
			border-collapse: collapse;
			margin: 0 0 2rem 0;
			width: 100%;
			margin: auto;
			}

		table.badges tbody tr td {
				border: solid 1px #000;
				text-align: center;
				justify-content: center;
				margin: auto;
				
			}
		table.badges td	{
			width: 25%;
			font-size: 0.9em;
		}
				
		table.badges td.emph {
			color: #FF9933;
			font-weight: 600;
			}
/* 

*****************************************************
Boxing
***************************************************** 
*/
* {
	box-sizing: border-box;
}


.badge {
	width: 25%;
	float: left;
	padding: 1px;
	border: 1px solid grey;
}

.desc {
	width: 100%;
	text-align: center;
	padding: 1px;
	
	font-size: 0.8em;
}

.badges {
	display: block;
	margin: auto;
	justify-content: center;
	text-align: center;
}
/*
*****************************************************
Hamburger Menu
***************************************************** 

*/

/* Style The Dropdown Button */
.dropbtn {
  background-color: rgba(0, 0, 0, 0.1);
  background-image:url("../indexfiles/mainbk.png");
  background-repeat:repeat-x;
  color: #fcc83b;
  padding: 5px 16px;
  font-size: 1em;
  border-width:0 1px 0 0;
  border-style:solid;
  border-color:#fcc83b;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  width: 120px;
  height: 38px;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #fcc83b;
  background-image:url("../indexfiles/mainbk.png");
  background-repeat:repeat-x;
  color: #000;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;

}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #000;
  border-width:0 1px 1px 0;
  border-style:solid;
  border-color:#fcc83b;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
  z-index: 999;
}

@media screen and (max-width: 480px) {

.dropbtn { width: 90px;}
.dropdown-content {min-width: 90px;}

}

/* Links inside the dropdown */
.dropdown-content a {
  background-image:url("../indexfiles/mainbk.png");
  background-repeat:repeat-x;
  color: #fcc83b;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: #fcc83b;
	color: #000;
	}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
/* .dropdown .dropbtn {
  background-color: #fcc83b;
  background-image:url("../indexfiles/mainbk.png");
  background-repeat:repeat-x;
  color: #000;
}
 */