@charset "utf-8";

header {
	width: 100%;
	height: auto; /* You must set a specified height */
	color: #ac7339;
	background-image: url("../img/background1.jpg"); /* The image used */
	background-color: #eeeee4; /* Used if the image is unavailable */
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */	
	padding-top: 1%;
	text-align: center;
	padding-bottom: 5%;
	position: relative;
}

container {
	height: 100%;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

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

/* Top Nav */
#top_nav {
	height: auto;
	width: 100%; 
	text-align: center;
	margin-top: 0px;
	margin-bottom: 10px;	
	background: #ac7339 url("../images/banner.jpg") no-repeat;
}
ul.drop_nav {
	list-style: none;
	display: inline;
	padding-left: 20px;
}
ul.drop_nav li {
	border-left: none;
	display: inline;
	background: url(../images/arrow.gif) no-repeat;
}
ul.drop_nav li a{
	font-family: 'IM Fell English', serif; font-size: 22px;
	display: inline;
	padding: 0px 20px 0px 20px;
	line-height: 40px;
	color: #fff;
	text-decoration: none;
}
ul.drop_nav li a:hover, li .selected{
	color: #000000;
	background: url(../images/arrow2.gif) no-repeat;
	text-decoration: none;
}
/* Top Nav drop-down portion */
ul.drop_nav li.hover, ul.drop_nav li:hover {
	position: relative;
	z-index: 599;
	cursor: default;
}
ul.drop_nav ul {
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 598;
	width: 200%;
	padding: 0px 10px 0px 0px;         
	background: #ac7339;
	border: 0px solid #000;
	border-top: none;
}
ul.drop_nav ul li{
	float: none;
	background: none;
	margin-left: 10px;
}
ul.drop_nav ul li a{
	font-family: 'IM Fell English', serif;
	color: #fff;
	font-weight: normal;
	font-size: 20px;
	line-height: 25px;
}
ul.drop_nav ul li a:hover {
	color: #000000;
	background: url(../images/arrow2.gif) no-repeat;
}
ul.drop_nav ul ul {
	top: 1px;
	left: 99%;
}

ul.drop_nav li:hover > ul {
	visibility: visible;
}

#topNav {
	height: 35px;
	width: 100%;
	padding-top: 10px;
	padding-left: 15px;
	text-align: center;
}
#topNav a {
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	display: inline;
	margin-right: 15px;
	padding-top: 10px;
	color: #ac7339;
}
#topNav a:hover {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #ac7339;
}

body{
	font-family: Pirata One, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5em;
	color: #333333;
	background-color: #eeeee4;
}
h1 {
	font-family: "Pirata One", "New York", serif;
	margin: 0px;
	font-size: 4em;
	position: relative;
	top: 20px;
}
h2 {
	font-family: Pirata One, Arial, Helvetica, sans-serif;
	margin: 2px;
	font-size: 3em;
	line-height: 0.75em;
	text-decoration: none;
}
h3 {
	font-family: Pirata One, Arial, Helvetica, sans-serif;
	margin: 2px;
	font-size: 3em;
	line-height: 1em;
	text-decoration: none;
}

#titleBar {
	font-family: 'IM Fell English', serif;
	height: 50px;
	width: 100%;
	background-color: #ac7339;
	color: #eeeee4;
	text-align: center;
	vertical-align: middle;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* Main Body */

#main {
	height: auto;
	width: 100%;
	position: relative;
}

/* index.php */
#main #contentOne {
	height: auto;
	width: 100%;
	float: left;
	color: #000000;
	text-decoration: none;
	background-image: url("../img/background3.jpg"); /* The image used */
	background-color: #eeeee4; /* Used if the image is unavailable */
	background-position: center; /* Center the image */
	background-size: cover; /* Resize the background image to cover the entire container */	
	position: relative;
}

/* about.php */
#main #contentOne-about {
	height: auto;
	width: 100%;
	float: left;
	color: #000000;
	text-decoration: none;
	background-image: url("../img/background3.jpg"); /* The image used */
	background-color: #eeeee4; /* Used if the image is unavailable */
	background-position: center; /* Center the image */
	background-size: cover; /* Resize the background image to cover the entire container */	
	padding-right: 1%;
	padding-left: 1%;
	position: relative;
}
/* sponsers.php */
#main #contentOne-sponsers {
	height: auto;
	width: 100%;
	float: left;
	color: #000000;
	font-family: "IM Fell English", "New York", serif;
	font-size: 2em;
	text-decoration: none;
	background-image: url("../img/background3.jpg"); /* The image used */
	background-color: #eeeee4; /* Used if the image is unavailable */
	background-position: center; /* Center the image */
	background-size: cover; /* Resize the background image to cover the entire container */	
	padding-right: 1%;
	padding-left: 1%;
	position: relative;
}

/* events.php */
#main #contentOne-events {
	height: auto;
	width: 100%;
	float: left;
	color: #000000;
	font-family: "IM Fell English", "New York", serif;
	font-size: 2em;
	text-decoration: none;
	background-image: url("../img/background3.jpg"); /* The image used */
	background-color: #eeeee4; /* Used if the image is unavailable */
	background-position: center; /* Center the image */
	background-size: cover; /* Resize the background image to cover the entire container */	
	padding-right: 1%;
	padding-left: 1%;
	position: relative;
}

/* vendors.php */
#main #contentOne-vendors {
	height: auto;
	width: 100%;
	float: left;
	color: #000000;
	font-family: "IM Fell English", "New York", serif;
	font-size: 2em;
	text-decoration: none;
	background-image: url("../img/background3.jpg"); /* The image used */
	background-color: #eeeee4; /* Used if the image is unavailable */
	background-position: center; /* Center the image */
	background-size: cover; /* Resize the background image to cover the entire container */	
	padding-right: 1%;
	padding-left: 1%;
	position: relative;
}


/* Right Column */

.rightcolumn {
  color: #ffffff;
  text-align: center;
  font-size: 14px;
}

#sponsor-ss {
	display: flex;
    align-items: center;
    justify-content: center;
}

#facebook_widgets {
	display: flex;
    align-items: center;
    justify-content: center;
}

/* Tables */

.table {
  width: 100%;
}

.table td {
  word-wrap:break-word;
  line-height: 150%;
  padding: 5px;
  height: 10px;
  text-align: center;
  vertical-align: middle;
}

td {
  height: 80px;
  width: 160px;
  text-align: center;
  vertical-align: middle;
}

/* General */


#apDiv5 {
	position: absolute;
	left: 430px;
	max-width: 100%;
	height: 225px;
	z-index: 2;
	bottom: 45px;
}

* {
  box-sizing: border-box;
}

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

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


/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}


/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/

/* set border-box so that percents can be used for width, padding, etc (personal preference) 
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

.cycle-slideshow { width: 45%; min-width: 100px; max-width: 600px; margin: 10px auto; padding: 0; position: relative;
    background: url(http://malsup.github.com/images/spinner.gif) 50% 50% repeat;
}

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img {
	/* some of these styles will be set by the plugin (by default) but setting them here helps avoid flash-of-unstyled-content */
	position: absolute;
	margin: auto;
	width: 200px;
	padding: 0;
	display: block;
}

footer {
	height: 35px;
	width: 100%;
}