body {
font-family: "bodoni-urw",sans-serif;
color: #3f3938;
font-size: 12pt;
text-align: left;
margin: 0 auto;
background-color: #f1efef !important;
-webkit-font-smoothing: antialiased; 
/* This needs to be set or some type looks bold on Mac. */
animation: loadfade 2.5s;
-moz-animation: loadfade 2.5s; /* Firefox */
-webkit-animation: loadfade 2.5s; /* Safari and Chrome */
-o-animation: loadfade 2.5s; /* Opera */
}

@keyframes loadfade {
0%   {opacity: 0;}
100%   {opacity: 1;}
}

@-moz-keyframes loadfade /* Firefox */ {
0%   {opacity: 0;}
100%   {opacity: 1;}
}

@-webkit-keyframes loadfade /* Safari and Chrome */ {
0%   {opacity: 0;}
100%   {opacity: 1;}
}

@-o-keyframes loadfade /* Opera */ {
0%   {opacity: 0;}
100%   {opacity: 1;}
}

#marquis {
position: relative;
width: 100vw;
min-height: 25vh;
padding: 0 0 2% 0;
background-color: #2d434b;
z-index: 1500 !important;
display: table;
}

#phonelink, #otnavlink {
position: relative;
float: left;
width: 21%;
margin: 4% 2% 0 2%;
color: #fff;
font-family: "gin",sans-serif;
font-size: 18pt;
font-weight: bold;
background-color: #2d434b;
display: table-row;
}

#masthead {
position: relative;
float: left;
width: 50%;
padding: 1% 0 1% 0%;
text-align: center;
overflow: hidden;
background-color: #2d434b;
display: table-row;
}

#masthead img {
width: 100%;
max-width: 250px;
}

#otnavlink img {
float: left;
position: relative;
top: 0;
margin: 0 2% 0 0;
}

#toplink, #toplink a {
display: none;
visibility: hidden;
}

#navbar {
position: relative;
clear: both;
width: 100vw;
height: 48px;
background-color: #2d434b;
//background-color: rgba(0, 0, 0, 0.2);
overflow: visible;
//text-align: right;
font-family: "gin",sans-serif;
font-size: 16pt;
font-weight: bold;
color: #fff;
z-index: 2400 !important;
}

#navbar span {
position: relative;
top: -12px;
//margin: 12px;
}

.trigger, label[for="trigger"] {
visibility: hidden;
display:none;
}

#navcontact {
float: right;
//width: 20%;
margin: 0 0 0 0;
//background-color: #f00;
text-align: left;
}

#navcontact img {
margin: 0 1% 0 0;
}

#nav {
//width: 58%;
margin: 0;
padding: 0 0 0 0;
//background-color: #0f0;
}

@media screen and (max-width: 800px) {
#nav {
width: 100vw;
}
}

#nav ul {
position: relative;
list-style-type: none;
margin: 0 auto;
padding: 0;
text-transform: uppercase;
z-index: 2500 !important;
}

#nav ul li {
float: left;
position: relative;
font-family: "gin",sans-serif;
font-size: 16pt;
font-weight: bold;
height: 40px;
padding: 8px 14px 0 14px;
margin: 0;
text-align: center;
border-style: groove;
border-color: #444;
border-width: 0 3px 0 0;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#nav ul li:last-child {
border-width: 0;
}

#nav ul li.selected {
//background-image: url(../images/selected.png);
}

#nav ul li:hover, #nav ul li:last-child:hover {
//padding: 5px 14px 0 14px;
}

#nav a, #nav a:visited {
text-decoration: none;
display: block;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
color: #fff;
}

#nav ul li.selected a { 
color: #d4cdcf;
}

#nav ul li:hover a, #nav ul li.selected:hover a {
color: #d4cdcf;
} 

#about {
float: left;
position: relative;
width: 88%; 
//height: 100%;
padding: 2% 6% 2% 6%;
clear: both;
background-color: #f1efef !important;
}

#holiday {
float: left;
position: relative;
width: 88%; 
//height: 100%;
padding: 2% 6% 2% 6%;
clear: both;
//background-color: #a7451d !important;
display: table;
}

.holiday_callout {
width: 45%;
float: left; 
margin: 0 3% 3% 0; 
display: table-row;
}

#blogposts {
float: left;
position: relative;
width: 60%; 
//height: 100%;
margin: 2% 2% 2% 6%;
clear: both;
}

#secondary {
width: 25%;
float: right;
margin: 2% 6% 2% 0;
}

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

#marquis {
min-height: 32vh;
}

#about, #holiday {
width: 94%;
padding: 2% 3% 2% 3%;
}

#about img {
width: 40%;
}
}

@media screen and (max-width: 760px) {
.holiday_callout {
width: 100%;
margin: 0; 
}
}

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

#marquis {
margin: 0 auto;
padding: 0;
}

#masthead {
width: 100vw;
margin: 0 auto;
padding: 0;
text-align: center;
}

#phonelink, #otnavlink {
display: none; 
visibility: hidden;
width: 0;
}

#about, #holiday {
width: 90%; 
margin: 0;
padding: 0 5% 0 5%;
}

#about img {
clear: both;
width: 100%;
}
}

#menus {
color: #f1efef;
position: relative;
min-height: 480px;
padding: 1% 8% 2% 8%;
background-color: #222;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center center;
overflow: hidden;
}

#menuscopy {
width: 60%;
}

/*
#menus {
color: #f1efef;
position: relative;
padding: 0% 10% 4% 10%;
background-color: #a7451d;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
overflow: hidden;
}

#menu h1 {
color: #f1efef;
}
*/

#visit {
position: relative;
width: 90%;
padding: 2% 5% 2% 5%;
background-color: #d4cdcf;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
overflow: hidden;
}

#reserve {
color: #f1efef;
position: relative;
width: 90%;
height: 240px;
padding: 1% 5% 2% 5%;
background-color: #222;
//overflow: hidden;
}

.bordered {
border-color: #fff;
border-width: 10px;
border-style: solid;
}

#sidebar {
position: absolute;
background-color: rgba(167,169,156,0.3);
width: 360px;
height: 100%;
padding: 2% 0 0 2%;
border-width: 0 0 0 10px;
border-style: solid;
border-color: #fff;
right: -10px;
top: 0;
}

#bartext {
position: relative;
width: 300px;
}

#nobar {
display: none;
visibility: hidden;
}

#footer {
position: relative;
float: left;
width: 100vw;
min-height: 56px;
margin: 0;
padding: 18px 0 18px 0;
font-size: 9pt;
text-align: center;
color: #f1efef;
background-color: #5c5452;
}

h1, h2, h3, h4 {
font-family: "gin",sans-serif;
color: #a7451d;
text-transform: uppercase;
}

#blogposts h1, #blogposts h2 {
font-family: "bodoni-urw",sans-serif;
}

a, a:visited {
color: #a7451d;
text-decoration: none;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

a:hover {
color: #f00;
}

#footer a, #footer a:visited, #navbar a, #navbar a:visited {
color: #fff;
}

#footer a:hover, #navbar a:hover {
color: #f1efef;
}

hr {
width: 95%;
margin: 12px 0 0 0;
}

.menubutton {
float: left;
margin: 0 18px 18px 0;
width: 40%;
max-width: 350px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
background-color: none;
}

.dirbutton {
float: left;
margin: 0 18px 1% 0;
//width: 20%;
max-width: 172px;
background-color: #a7451d;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

.menubutton:hover, .dirbutton:hover {
background-color: #a7451d;
}

.holidaybutton {
clear: both;
margin: 0 18px 18px 0;
width: 40%;
max-width: 350px;
background-color: #a7451d;
opacity: 1;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

.holidaybutton:hover {
background-color: #333;
opacity: 0.8;
}

.noshow {
visibility: hidden;
display: none;
}

/* styles for vertical phones */

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

#toplink, #toplink a {
display: inline;
visibility: visible;
position: fixed;
top: 0;
right: 0;
margin: 1% 3% 0 0;
color: #2d434b;
font-size: 21pt;
font-weight: bold;
color: #f1efef;
background-color: #a7451d;
padding: 6px 10px 0 10px;
z-index: 101;
border: 1px #fff solid;
}

#nav {
width: auto;
display: none;
}

#navbar {
display: block;
text-align: center;
padding: 2% 0 0 0;
background-color: #2d434b;
}

#nav ul li, #nav ul li:hover {
position: relative;
width: 100vw;
padding: 8px 0 6px 0;
font-size: 21pt;
margin: 0 0 2px 0;
background-color: #2d434b;
border: 0;
}

#navcontact, #socmedlinks {
display: none; 
visibility: hidden;
}

#slideshow {
height: 0;
display: none;
visibility: hidden;
}

.trigger {
visibility: hidden;
display: none;
}

.trigger:checked ~ #nav {
display: inline;
}

label[for="trigger"] {
display: inline;
visibility: visible;
float: none; 
text-align: center;
color: #fff;
font-weight: bold;
font-size: 12pt;
cursor: pointer;
background-size: contain;
z-index: 102;
}

#about {
//padding: 1% 4% 2% 4%;
}

#aboutcopy {
width: 85%;
}

#blogposts {
width: 90%;
}

#secondary {
display: none;
visibility: hidden;
}
}

/* LAYOUT */
#slideshow {
margin: 0 auto;
overflow: hidden;
width: 100vw;
top: 0;
height: 40vh;
background-repeat: no-repeat !important;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
position: relative;
z-index: -10000000000000 !important;
}

/* CONTENT SLIDER */
#content-slider {
width:100%;
}
/* SLIDER */
#slider {
width:100%;
overflow: visible;
}

#mask {
overflow:hidden;
height: 40vh;
}

#slider ul {
	margin:0;
	padding:0;
	position:relative;
	z-index: 10 !important;
}
#slider li {
	width:100%;
	//height: 40vh;
	position:absolute;
	//top:-40vh;
	list-style:none;
	margin: 0 0 -40vh 0;
}
#slider li img {
	width:100%;
	min-width: 1180px;
	position: fixed;
	top: 0;
}

#slider li.firstanimation {
	-moz-animation:cycle 40s linear infinite;	
	-webkit-animation:cycle 40s linear infinite;		
}
#slider li.secondanimation {
	-moz-animation:cycletwo 40s linear infinite;
	-webkit-animation:cycletwo 40s linear infinite;		
}
#slider li.thirdanimation {
	-moz-animation:cyclethree 40s linear infinite;
	-webkit-animation:cyclethree 40s linear infinite;		
}
#slider li.fourthanimation {
	-moz-animation:cyclefour 40s linear infinite;
	-webkit-animation:cyclefour 40s linear infinite;		
}
#slider li.fifthanimation {
	-moz-animation:cyclefive 40s linear infinite;
	-webkit-animation:cyclefive 40s linear infinite;		
}