/***************************
GENERAL: created by me

***************************/
body {
 font-family: 'Open Sans', sans-serif;
 padding: 0;
 margin: 0;
 background-color: #ffffff;
}

a,  a:visited{
  text-decoration:none;
  color: #E77917;
  transition-duration: .5s;
}

a:hover  {
  color: #A55723;
}


img {
  max-width: 100%;
}

h1 {
  font-family: 'Cinzel', serif;
  font-size: 2em;
  font-weight: 700;
  color: #000;
  text-align: center;
}

h2, p {
  font-family: 'Maven Pro', serif;
  font-weight: 400;
  color: #000;
}

p {
  font-size: 1.05em;
}

h2 {
  font-size: 1.5em;
}

.wrapper {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 7%;
}


/***************************
NAVIGATION BAR
***************************/
.nav-back {
  height: 100px; 
  z-index: 3;
  width: 100%;
  position: fixed;
  padding-top: 15px;
  /* Adds shadow to the bottom of the bar */
  -webkit-box-shadow: 0px 0px 8px 0px #000000;
  -moz-box-shadow: 0px 0px 8px 0px #000000;
  box-shadow: 0px 0px 8px 0px #000000;

  /* Adds the transparent background */ 
  background: -moz-linear-gradient(top,  rgba(0,0,0,0.96) 19%, rgba(0,0,0,0.89) 42%, rgba(0,0,0,0.86) 50%, rgba(0,0,0,0.75) 79%, rgba(0,0,0,0.7) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(19%,rgba(0,0,0,0.96)), color-stop(42%,rgba(0,0,0,0.89)), color-stop(50%,rgba(0,0,0,0.86)), color-stop(79%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.96) 19%,rgba(0,0,0,0.89) 42%,rgba(0,0,0,0.86) 50%,rgba(0,0,0,0.75) 79%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(0,0,0,0.96) 19%,rgba(0,0,0,0.89) 42%,rgba(0,0,0,0.86) 50%,rgba(0,0,0,0.75) 79%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(0,0,0,0.96) 19%,rgba(0,0,0,0.89) 42%,rgba(0,0,0,0.86) 50%,rgba(0,0,0,0.75) 79%,rgba(0,0,0,0.7) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(0,0,0,0.96) 19%,rgba(0,0,0,0.89) 42%,rgba(0,0,0,0.86) 50%,rgba(0,0,0,0.75) 79%,rgba(0,0,0,0.7) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5000000', endColorstr='#b3000000',GradientType=0 ); /* IE6-9 */
}

.nav-back a img{
  float: left;
  width: 260px;
  height: 90px;
  margin-left: 5%;
  margin-top: 5px;
}

nav#nav-main {
  float: right;
  width: 60%;
}

nav#nav-main li {
  display: inline-block; 
  margin: 5px 0px 10px;
 }

nav#nav-main ul {
  list-style: none;
  margin-top: 30px;
}

nav#nav-main li a{
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: 1.25em;
  color: #E77917;
  text-decoration: none;
  border-radius: 8px;
  border: solid 1px transparent;
  padding: .15em;
  background-color: rgba(232, 228, 228, 0.2);
  transition-duration: .5s;
}

nav#nav-main a:visited {
  color: #E77917;
}

nav#nav-main a:hover{
  color: #000;
  background-color: rgba(232, 228, 228, 0.9);
  /*border: solid 1px #E77917;*/
  border-bottom: solid 7px #E77917;
}

#nav-trigger {
  display: none;
  text-align: right;
  }
  
#nav-trigger span {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  color: #E77917;
  display: inline-block;
  padding: 10px 30px;
  cursor: pointer;
  text-transform: uppercase; 
}
#nav-trigger span:after {
  display: inline-block;
  margin-left: 10px;
  width: 20px;
  height: 10px;
  content: "";
  border-left: solid 10px transparent;
  border-top: solid 10px #fff;
  border-right: solid 10px transparent; 
}

#nav-trigger span.open:after {
  border-left: solid 10px transparent;
  border-top: none;
  border-bottom: solid 10px #fff;
  border-right: solid 10px transparent; 
}

nav#nav-mobile {
  position: relative;
  display: none; 
}

nav#nav-mobile ul {
  display: none;
  list-style-type: none;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background-color: rgba(232, 228, 228, 0.98);
  padding: .15em;
  border-radius: 8px;
  transition-duration: .5s; 
}

nav#nav-mobile li {
  display: block;
  padding: 5px 0;
  margin: 0 5px;
  border-bottom: solid 1px #000000; 
}

nav#nav-mobile li:last-child {
  border-bottom: none; 
}

nav#nav-mobile a {
  display: block;
  font-family: 'Cinzel', serif;
  font-weight: 400;
  padding: .15em;
  color: #E77917;
  text-decoration: none;
  font-size: 1.15em;
  transition-duration: .5s;
  padding: 10px 30px; 
}

nav#nav-mobile a:hover {
  color: #000;
  background-color: rgba(232, 228, 228, 1);
}

.active_page {
  background-color: rgba(232, 228, 228, 0.9);
  padding: .15em;
  border-radius: 8px;
  border-bottom: solid 7px #E77917;
}

/***************************
FOOTER
***************************/
footer{
  font-size: 1.1em;
  text-align: center;
  clear: both;
  padding-top: 50px;
}

footer a {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  color: #E77917;
  text-align: center;
  background-color: rgba(232, 228, 228, 0.2);
  padding: .45em;
  border-radius: 8px;
  transition-duration: .5s;
}

footer a:hover {
  background-color: rgba(232, 228, 228, 0.9);
  color: #000;
}

footer p {
  color: #E77917;
  text-align: center;
}

/***************************
BACKGROUND
****************************/
.homebase {
  padding: 50px 0px 100px;
  margin-top: -15px;
  background: no-repeat center center fixed;
  background-size: cover; 
}

.homepage {
  background-image: url('../img/creepytrees.jpg'); 
  background-color: black;
}


/***************************
BX-SLIDER
****************************/
.text_box {
  background-color: rgba(232, 228, 228, 0.9);
  border-radius: 2px;
  transition-duration: .5s;
  border: solid 2px transparent;
  max-width: 100%;
}

.text_box:hover {
  background-color: rgba(232, 228, 228, 1);
  border: solid 2px #A55723;
}

/***************************
SLIDE 1
***************************/
.welcome li {
  width: 32.5%;
  padding: 0.25%;
  margin-right: auto;
  margin-left: auto;
  float: left
}
.welcome ul {
  list-style: none;
  padding: 0;
}

/***************************
SLIDE 2
***************************/
.bxslider .wrapper .halfbox{
  float: left;
  width: 49%;
}

.introtext p {
  text-align: left;
}

.google-maps {
  margin-top: 10px;
  padding-bottom: 100%; // This is the aspect ratio
  height: 0;
  overflow: hidden;
  margin-bottom: -100%;
  float: right;
  width: 45%;
}

/***************************
Trick-or-Treat Page
***************************/
.tot {
  margin-top: 1%;
  margin-left: auto;
  margin-right: auto;
}

.tot p {
  text-align: left;
  font-size: .55em;
  margin: 2%;
}

.tot ul {
  text-align: left;
  font-size: .60em;
  margin: 2%;
}

.tot img {
  float: right;
  margin: 0px 15px 15px 0px;
  width: 30%;
}

/***************************
News Headlines
***************************/

.news_box {
  padding: 0;
  list-style: none;
}

.news_box li {
  width: 30%;
  float: left;
  margin: 1%;
  border-radius: 8px;
  background-color: rgba(232, 228, 228, 0.9);
  transition-duration: .5s;
}

.news_box li h1 {
  font-size: 0.95em;
  text-align: center;
  background: black;
  font-family: 'Cinzel', serif;
  font-weight: 400;
  color: #E77917;
}

.news_box li h2 {
  font-size: 0.95em;
  text-align: left;
  font-family: 'Cinzel', serif;
  font-weight: 400;
  padding-left: 5%;
}

.news_box li h2 a {
  color: #000;
}

.news_box li:hover {
  background-color: rgba(232, 228, 228, 1);
}
.news_box li:hover h2 a {
  color: #E45400;
}

.news_box li img {
  float: left;
  width: 50%;
  padding-left: 5%;
  padding-right: 2%;
}

.news_box li p{
  font-family: 'Maven Pro', serif;
  font-weight: 400;
  font-size: 0.75em;
  color: #000000;
  margin: 0;
  padding: 5%;
}

.news_box li p a {
  transition-duration: .5s;
  color: #E45400;
}

.news_box li p a:hover {
  color: #E77917;
}

.news_box li:nth-child(3n+4) {
    clear: left; 
  }

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/***************************
Pictures
***************************/
.wrapper .main-image {
  width: 50%;
  float: right;
  top: 17%;
  right: 5%;
  position: fixed;
}

.wrapper .thumbnails {
  float: left;
  width: 50%;
} 

.main-image .caption { 
 z-index: 5;
 margin-top: -63px;
 display: block;
 background: rgba(0, 0, 0, 0.4); 
 position: relative;
 left: 1px;
}

.main-image .caption p {
  color: #fff;
  padding: 10px 0px;
  margin-left: 10px;
}

.main-image .caption a { 
  color: #fff;
}

.main-image .caption:hover a { 
  color: #E77917;
  font-size: 1.01em;
}

.main-image img {
  border: solid 1px #fff;
  z-index: 1;
  max-height: 80%;

}

.thumbnails {
  padding: 0;
  list-style: none;
}

.thumbnails li{
  width: 15%;
  padding: 1%;
  float: left;
  overflow: hidden;
}

.thumbnails li img{
  max-width: 100%;
  border: solid 1px #fff;
  transition-duration: .5s;
}

.thumbnails li img:hover{
  border: solid 1px #A55723;
}

.thumbnails li:nth-child(5n+6) {
    clear: left; 
}

/***************************
News Headlines
***************************/
.video_box {
  padding: 0;
  list-style: none;
}

.video_box li {
  width: 31.333%;
  float: left;
  margin: 1%;
  border-radius: 8px;
  background-color: rgba(232, 228, 228, 0.9);
  transition-duration: .5s;
}

.video_box li h1 {
  font-size: 0.95em;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-weight: 400;
}

.video_box li h1 a {
  color: #000000;
}

.video_box li:hover {
  background-color: rgba(232, 228, 228, 1);
}
.video_box li:hover h1 a {
  color: #E45400;
}

.video_box li:nth-child(3n+4) {
    clear: left; 
}

/***************************
Selfie Text Box at top
***************************/
 .selfietext {
   margin-top: 1%; 
   text-align: center;
   font-size: 1.25em;
   background-color: rgba(232, 228, 228, 0.9);
   border-radius: 4px;
   transition-duration: .5s;
   border: solid 2px transparent;
   width: 65%;
   margin-left: auto;
   margin-right: auto;
   font-family: 'Maven Pro', serif;
   font-weight: 400;
   padding: 5px;
}

.selfietext:hover {
  background-color: rgba(232, 228, 228, 1);
  border: solid 2px #A55723;
}

/***************************
PAGE CONTACT
***************************/
.social-icons {
  margin-top: 10%;
  width: 90%;
}

.social-icons img {
  width: 15%;
  padding: 1%;
  margin: 1%;
  border-radius: 50%;
  background: white;
  transition-duration: .5s;
  border: solid 10px transparent;
}

.social-icons img:hover {
  border: solid 10px #E77917;
}