@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300|PT+Serif:400,700);

/******************

Any styles in each class or id underneath the dotted line is safe to customize. 
Editing styles above the line can result in the layout and/or site breaking.

*******************/

/**********************
Global styles
*********************/
body {
	width:100%;
	height:100% !important;
	/*******/
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
	background:#333;
	color:#fff; /***global text color***/
}

h1,h2,h3,h4,h5,h6 {
	/*******/
	font-weight:100;
	font-family:'windsor-light', Helvetica, Arial, sans-serif;
	color:#fcf5d9;
}

a {
	-webkit-transition: background .5s, color .5s ease-out;
	-moz-transition:
	 background, color .5s .5s ease-out;
	transition: background .5s, color .5s ease-out;
}


#container {
	height:100%;
}

.back-to-top {
	position: fixed;
	left: 50%;
	bottom:86px;/**** this should match the height of the .footer class***/
	text-align: center;
	right: 0px;
	display: none;
	z-index: 100;
	padding:1rem;
	/******/
	background-image: url("../img/bg_bar.png");
	margin-left: -30px;
	width: 60px;
	height:50px;
	border-radius:3px 3px 0 0;
	-webkit-border-radius:3px 3px 0 0;
}

a .back-to-top {
	/******/
	color:#817f73;
}

h1,h2,h3,h4,h5,h6 {
	/******/
	color:#fcf5d9;
	text-align:center;
	padding:0 0 1rem 0;
	margin:0;
	font-family:'windsor-light', Helvetica, Arial, sans-serif;
}


.title {
	padding: 0;
	margin: 0;
	color: #fcf5d9;
	text-shadow: 1px 1px #333;
	text-transform: uppercase;
	}

.directorCredit {
	color: #fcf5d9;
	text-shadow: 1px 1px #333;
	}

h1	{
	text-shadow: 1px 1px #333;
	}

h1.dark	{
	color: #333;
	text-shadow: 1px 1px #fcf5d9;
	}

/**********************
Sticky top Navigation
*********************/
.navigationcontainer {
	width:100%;
	top:0;
	z-index:50;
	position:fixed;
	/*****/
	background-image: url("../img/bg_bar.png");
	color:#fff;
	padding:1rem;
	border-bottom: 1px solid #817F73;
}

.navigationcontainer h1 {
	padding:0;
	margin:0;
	text-align:center;
	/*****/
	color:#fcf5d9;
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
	font-size:1rem;
}

.navigationcontainer ul li {
	margin:0;
	padding:0;
	/*******/
	text-align:center;
	font-size:.9rem;
}

.navigationcontainer ul li a{
	/*******/
	font-family:'windsor-light', sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	color:#817f73;
}

.navigationcontainer ul li a:hover{
	/*******/
	color: #fcf5d9;
	} 
/**********************
Main sections/pages
*********************/
.section {
	width:100%;
	height:100%;
	position:relative;
	padding-top:5rem;
}

.bio li {
	margin: 0 0 7px 0;
	padding: 0;
	}

.bio li a {
	padding: 5px 7px 5px 7px;
	background-image: url("../img/bg_bar.png");
	border-radius: 5px;
	-webkit-border-radius:5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	}

/****************
For the following, do not edit the background size css. 
Change the path of the background image to change it, 
or just name your background images the same as what's already here.
The background image paths had to come before the background size css in order to work properly.
For best results, use minimum size of around 1400x900, and maximum of 1920x1080. Ratio should be similar to 16:9, or standard TV ratio.
****************/
.page1 {
  background: url(../img/bg_1.jpg) no-repeat center center ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.page2 {
background: url(../img/bg_2.jpg) no-repeat center center ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.page3 {
	background: url(../img/bg_3.jpg) no-repeat center center ;
	background-color:#af0000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.page4 {
background: url(../img/bg_4.jpg) no-repeat center center ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.page5 {
	  	background: url(../img/bg_5.jpg) no-repeat center center ;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

.page6 {
	 background: url(../img/bg_6.jpg) no-repeat center center ;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

.page7 {
  	background: url(../img/bg_7.jpg) no-repeat center center ;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

.page7 li img {
	border: 1px solid #817F73;
	}




.inter1 {
  	background: url(../img/bg_inter_1.jpg) no-repeat center center ;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

.inter2 {
  	background: url(../img/bg_inter_2.jpg) no-repeat center center ;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

.inter3 {
  	background: url(../img/bg_inter_3.jpg) no-repeat center center ;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

.inter4 {
  	background: url(../img/bg_inter_4.jpg) no-repeat center center ;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

/**********************
footer
*********************/
.footer {
	width:100%;
	position:fixed;
	bottom:0;
	/*******/
	padding:1rem;
	background-image: url("../img/bg_bar.png");
	font-size:.8rem;
	text-transform:uppercase;
}

.footer a{
	/*******/
	color:#817f73;
	font-size:.8rem;
}

.footer a.social {
	/*******/
	color:#817f73;
	font-size:1rem;
}
.copyright {
	/*****/
	font-size:.8rem;
	color:#817f73;
	text-align:center;
	text-transform:none;
	padding-top:1rem;
}

/**********************
Buttons - everything in this section is editable
**********************/
button, .button {
	border-style:none;
	border-width:0px;
	border-color:#000;
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
	text-transform:uppercase;
	border-radius:3px; /**** rounded corners, use "0px" for no rounded ****/
	-webkit-border-radius:3px;  /**** should be same value as above *****/
	background:#999;
	color:#fff;
}

button:hover, button:focus, .button:hover, .button:focus {
	background:#000;
	color:#999;
}

/**********************
Accordion - everything in this section is editable
**********************/
.accordion dd > a {
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
	background:rgba(0,0,0,0.5);
	color:#fff;
}

.accordion dd > a:hover {
	background:rgba(0,0,0,1);
}

.accordion dd.active > a {
	background:rgba(0,0,0,0.8);
}
.accordion dd > .content.active {
	background:rgba(0,0,0,0.2);
}
/**********************
opening dates
*********************/
.openingdates {
	width:100%;
	position:absolute;
	bottom:6rem;
	/*******/
	text-align:center;
}

.openingdates h5 {
	color: #fcf5d9;
	text-shadow: 1px 1px #333;
	}
	
.openingdates h5 a {
	color: #fcf5d9;
	text-shadow: 1px 1px #333;
	font-style: italic;
	}

.openingdates h5 a:hover {
	color: #FBF09C;
	}

/**********************
modal
**********************/
.reveal-modal {
	/******/
	color:#000;
}

.reveal-modal h1,.reveal-modal h2,.reveal-modal h3,.reveal-modal h4,.reveal-modal h5 {
	/******/
	color:#000;
	text-align: left;
}

.lead {
	font-family: 'windsor-light';
	}

.modal {
	font-family: 'windsor-light', serif;
	color: #fcf5d9;
	letter-spacing: 1px;
	}

.modal:hover {
	color:#817f73;
}

.bioimage {
	margin: 0px 10px 3px 0px;
	width: 250px;
	border: 1px solid #817F73;
	}

/**********************
scrolling text box
*********************/

.scrolltext {
	/******/
	height:400px;
	border:1px solid rgba(0,0,0,0.3);
	padding:1rem;
	background:rgba(0,0,0,0.5);
}

.reveal-modal.scrolltext {
	/******/
	height:300px;
	border:1px solid rgba(0,0,0,0.3);
	padding:1rem;
	background-color: #FFF:
}

.scrollmodal {
	/******/
	height:300px;
	overflow-y:scroll;
	background-color: #FFF:
}

/**********************
Slider Content
*********************/


.slidercontent {
	text-align: center;
	}

.slidercontent h2 {
	font-size: 1.3rem;
	padding: 0 0 10px 0;
	text-shadow: 1px 1px #000;
	}

.slidercontent p {
	font-size: 1rem;
	font-style: italic;
	text-shadow: 1px 1px #000;
	}

/**********************
Foundation overrides - DO NOT TOUCH
*********************/

dialog, .reveal-modal {
	padding:1em;
	border:none;
}

.reveal-modal-bg {
	background:rgba(0,0,0,0.7);
}

.flex-video  {
	margin-bottom:0;
}

.footer ul, .footer ul li {
	margin:0;
	padding:0;
	text-align:center;
}

@media only screen and (max-width: 40em) {
	dialog, .reveal-modal {
		min-height:0;
		background:none;
	}
}

/**********************
Mobile-only styles - probably best if these aren't changed
*********************/
@media (max-width: 768px) {

	.icon-list {
		font-size:2rem;
	}

	.section.expand {
	height:150%;
	}

	.scrolltext {
		/******adjust this as needed. Test on mobile device to see how much you need to adjust***/
		height:200px;
}