html, body {
	background-color: #ffffff;
	text-align: center;
	height: 100%;
	font-weight: normal;
	font-size: 100%;
	font-family: verdana, arial, sans-serif;
	color: #072b07;	
}

html, body, div, span, table, td, img, figcaption, figure {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, details, figcaption, figure, img, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

img, embed, object, video {
	max-width: 100%;
}

.spacer {
	width: 1px;
	height: 1px;
}

a:focus { 
	outline: none; 
}

a {
	color: #483087;
}

#page {
	display: block;
     position: relative;
     margin: 0;
     padding: 0;
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
}

#top-bar {
	display: block;
     margin: 0;
     padding: 10px 2% 10px 3%;
     width: 100%;
     background-color: #000000;
     color: #ffffff;
     font-size: .8rem;
     line-height: 1.2rem;
     box-sizing: border-box;
}

#top-bar a {
	color: #ffffff;
     text-decoration: none;
}

#top-bar-left {
     width: 50%;
     float: left;
     text-align: left;
}

#top-bar-right {
     width: 50%;
     float: right;
     text-align: right;
}

.phone-icon {
     padding: 0 10px 0 30px;
}

.phone-link {
	text-decoration: none;
}

.patio-hours {
     display: inline-block;
     float: right;
     padding-right: 30px;
}

.top-icon {
     float: right;
	color: rgba(255,255,255,1);
	display: inline-block;
	padding: 0 10px;
     font-size: 1.2rem;
     margin: 0;
     box-sizing: border-box;
     text-align: center;
     transition-duration: 0.8s;
	transition-property: transform;
	overflow: hidden;
}

.top-icon:hover {
	cursor: pointer;
     color: rgba(255,255,255,1) !important; 
     transform: rotate(360deg);
}

#menu-bar {
	display: block;
     margin: 0;
     padding: 0 3%;
     width: 100%;
     height: 120px;
     background-color: #ffffff;
     box-sizing: border-box;
}

.reservations-button a {
     background-color: #518240 !important;
     color: #ffffff !important;
     margin-left: 40px;
}

.reservations-button a:hover {
     background-color: #356a98 !important;
     color: #ffffff !important;     
}

.order-take-out-button a {
     background-color: #518240 !important;
     color: #ffffff !important;
     margin-left: 40px;
}

.order-take-out-button a:hover {
     background-color: #356a98 !important;
     color: #ffffff !important;     
}

#top-logo {
     display: block;
     width: 25%;
	max-width: 250px;
	margin: 0;
	float: left;
}

#page-title-block {
	margin: 0;
	padding: 0;
	width: 100%;
     height: 600px;
     background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#page-title-block2 {
	margin: 0;
	padding: 0;
	width: 100%;
     height: 450px;
     background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

@keyframes page-title-graphic-animation {
     0% { opacity:0; transform: translateY(40%); }
     10% { opacity:0; transform: translateY(40%); }
     70% { opacity:1; transform: translateY(0); }
     100% { opacity:1; transform: translateY(0); }
}
     
.title-graphic-animation {
     animation-iteration-count: 1;
     animation-duration: 3s;
     animation-name: page-title-graphic-animation; 
}

@keyframes page-title-animation {
     0% { opacity:0; transform: translateX(10%); }
     40% { opacity:0; transform: translateX(10%); }
     90% { opacity:1; transform: translateX(0); }
     100% { opacity:1; transform: translateX(0); }
}
     
.title-animation {
     animation-iteration-count: 1;
     animation-duration: 3s;
     animation-name: page-title-animation; 
}

@keyframes page-title-description-animation {
     0% { opacity:0; transform: translateX(10%); }
     50% { opacity:0; transform: translateX(10%); }
     100% { opacity:1; transform: translateX(0); }
     100% { opacity:1; transform: translateX(0); }
}
     
.title-description-animation {
     animation-iteration-count: 1;
     animation-duration: 3s;
     animation-name: page-title-description-animation; 
}

.page-title-container {
     display: table;
     margin: 0 auto;
     padding: 150px 0 0 0;
     width: 50%;
}

.page-title-container2 {
     display: table;
     margin: 0 auto;
     padding: 60px 0 0 0;
     width: 50%;
}

.page-title-container3 {
     display: table;
     margin: 0 auto;
     padding: 60px 0 0 0;
     width: 50%;
}

.page-title-container4 {
     display: table;
     margin: 0 auto;
     padding: 60px 0 0 0;
     width: 50%;
}

.page-title-container5 {
     display: table;
     margin: 0 auto;
     padding: 60px 0 0 0;
     width: 50%;
}

.page-title-graphic-container {
     display: table-cell;
     width: 20%;
     padding-bottom: 20px;
}

.page-title-graphic-container2 {
     display: table-cell;
     width: 25%;
     padding-bottom: 10px;
}

.page-title-graphic-container3 {
     display: table-cell;
     width: 25%;
     padding-bottom: 10px;
}

.page-title-graphic-container4 {
     display: table-cell;
     width: 25%;
     padding-bottom: 10px;
}

.page-title-graphic-container5 {
     display: table-cell;
     width: 25%;
     padding-bottom: 10px;
}

.page-title-graphic {
     width: 450px;
     margin: 0 auto;
}

.page-title-graphic2 {
     width: 380px;
     margin: 0 auto;
}

.page-title-graphic3 {
     width: 350px;
     margin: 0 auto;
}

.page-title-graphic4 {
     width: 300px;
     margin: 0 auto;
}

.page-title-graphic5 {
     width: 450px;
     margin: 0 auto;
}

.page-title-text-container {
     display: table-cell;
     width: 80%;
     margin: 0;
     padding: 0;
     text-align: center;
     vertical-align: middle;
}

.page-title-text-container2 {
     display: table-cell;
     width: 75%;
     margin: 0;
     padding: 0;
     text-align: center;
     vertical-align: middle;
}

.page-title {    
     color: #ffffff;
     font-family: impact, verdana, arial, sans-serif;
     font-size: 5rem;
     white-space: nowrap;
}

.page-title2 {    
     color: #ffffff;
     font-family: impact, verdana, arial, sans-serif;
     font-size: 6rem;
     white-space: nowrap;
}

.page-description {
     color: #ffffff;
     font-size: 1.6rem;
     margin-top: 5px;
     white-space: nowrap;
}

#icon-bar {
	display: block;
     margin: 0;
     padding: 10px 2% 10px 3%;
     width: 100%;
     text-align: right;
     background-color: #000000;
     box-sizing: border-box;
}

.circle-icon {
	border-width: 2px;
     border-style: solid;
	color: #ffffff !Important;
	border-radius: 50%;
	display: inline-block;
     width: 40px;
     height: 40px;
	padding: 5px 0 0 0;
     font-size: 1.2rem;
     float: right;
     margin-right: 20px;
     text-align: center;
     box-sizing: border-box;
     transition-duration: 0.8s;
	transition-property: transform;
	overflow: hidden;
}

.circle-icon:hover {
	cursor: pointer;
	color: #ffffff !important;
     transform: rotate(360deg);
}

.circle-icon2 {
	border-width: 2px;
     border-style: solid;
	color: #ffffff !Important;
	border-radius: 50%;
	display: inline-block;
     width: 40px;
     height: 40px;
	padding: 8px 0 0 0;
     font-size: 1.2rem;
     float: right;
     margin-right: 20px;
     text-align: center;
     box-sizing: border-box;
     transition-duration: 0.8s;
	transition-property: transform;
	overflow: hidden;
}

.circle-icon2:hover {
	cursor: pointer;
	color: #ffffff !important;
     transform: rotate(360deg);
}

.blue-text-button {
     color: #275684 !important;
     background-color: #ffffff !important;
}

.blue-text-button:hover {
     color: #ffffff !important;
     background-color: #000000 !important;
}

.green-text-button {
     color: #286c2b !important;
     background-color: #ffffff !important;
}

.green-text-button:hover {
     color: #ffffff !important;
     background-color: #000000 !important;
}

.yellow-text-button {
     color: #8b7d00 !important;
     background-color: #ffffff !important;
}

.yellow-text-button:hover {
     color: #ffffff !important;
     background-color: #000000 !important;
}

#content {
	width: 100%;
     margin: 0;
     padding: 0;     
}

.scroll-up-container {
	position: fixed;
     right: 20px;
     bottom: 8px;
     z-index: 10;
	display:none;
}

.scroll-up {
	color:#fff !Important;
     background-color: #000000;
	border-radius:10px;
	display:inline-block;
	padding:9px 12px;
	transition:all 0.5s ease-in-out;
     border-style: solid;
     border-width: 2px;
     border-color: #000000;
}

.scroll-up:hover {
	cursor:pointer;
	background-color: #ffffff;
	color:#000000 !important;
	transition:all 0.5s ease-in-out;
}

#change-notice {
	width: 96%;
     margin: 0 auto;
     padding: 40px 0 15px 0;
     background-color: #ffffff;
     color: #000000;
     font-size: .8rem;
     font-style: italic;
     text-align: right;
     box-sizing: border-box;
}

#bottom-bar {
	width: 100%;
     margin: 0;
     padding: 50px 0 0 0;
     background-color: #ffffff;
     border-style: solid;
     border-width: 5px 0 0 0;
     border-color: #000000;
}

#bottom-bar a {
	color: #000000;
}

#bottom-bar a:hover {
	color: #000000;
}

#bottom-bar-content {
     width: 90%;
     max-width: 1000px;
     margin: 0 auto;
}

#bottom-bar-left {
     width: 32%;
     padding: 0;
}

#bottom-bar-middle {
     width: 48%;
     padding: 10px 30px 0 0;
     font-size: .9rem;
     line-height: 1.4rem;
     color: #000000;
     text-align: left;
}

#bottom-bar-right {
     width: 20%;
     padding: 10px 0 0 0;
     font-size: .9rem;
     line-height: 1.4rem;
     color: #000000;
     text-align: left;
}

#bottom-logo {
     display: block;
     width: 250px;
     margin: 0;
}

#phone-bottom-logo {
     display: block;
     margin: 0 auto 30px auto;
     width: 85%;
     max-width: 200px;
}

#footer-bottom {
	width: 100%;
	height: 50px;
	background-color: #000000;
	display: block;
     line-height: 50px;
	font-size: .75rem;
	color: #ffffff;
}

#footer-bottom a {
	color: #ffffff;
}

#phone-footer-bottom {
	width: 100%;
	background-color: #000000;
	display: none;
     font-size: .7rem;
     line-height: 1.25rem;
	color: #ffffff;
	padding: 20px 0 40px 0;
}

#phone-footer-bottom a {
	color: #ffffff;
}

#footer-bottom-left-column {
	float: left;
	width: 50%;
	text-align: left;
	padding-left: 30px;
     box-sizing: border-box;
}

#footer-bottom-right-column {
	float: right;
	width: 50%;
	text-align: right;
     padding-right: 80px;
     box-sizing: border-box;
}

.no-phone-or-tablet-display {
     display: block;
}

.display-phone-and-tablet-only {
     display: none;
} 


@media screen and (max-width : 1200px){
     
.no-phone-or-tablet-display {
     display: none;
}
     
.display-phone-and-tablet-only {
     display: block;
}  
     
#top-logo {
     margin: 0 auto;
     width: 90%;
     float: none;
} 
     
.page-title-block {
     height: 400px;
}
     
.page-title-block2 {
     height: 400px;
}
     
.page-title-container5 {
     padding: 40px 0 0 0;
}     
     
.page-title-graphic-container {
     display: block;
     width: 90%;
     margin: 0 auto;
}
     
.page-title-graphic-container2 {
     display: block;
     width: 90%;
     margin: 0 auto;
}
     
.page-title-graphic-container3 {
     display: block;
     width: 90%;
     margin: 0 auto;
}
     
.page-title-graphic-container4 {
     display: block;
     width: 90%;
     margin: 0 auto;
}
     
.page-title-graphic-container5 {
     display: block;
     width: 90%;
     margin: 0 auto -20px auto;
}      

.page-title-graphic {
     width: 250px;
     margin: 0 auto;
}
     
.page-title-graphic2 {
     width: 280px;
     margin: 0 auto;
}
     
.page-title-graphic3 {
     width: 220px;
     margin: 0 auto;
}
     
.page-title-graphic4 {
     width: 200px;
     margin: 0 auto;
}
     
.page-title-graphic5 {
     width: 350px;
     margin: 0 auto;
}     

.page-title-text-container {
     display: block;
     width: 100%;
     margin: 0 auto;
}
     
.page-title-text-container2 {
     display: block;
     width: 100%;
     margin: 0 auto;
}     
     
.page-title {
     font-size: 4rem;
}
     
.page-title2 {
     font-size: 4.5rem;
}     

.page-description {
     font-size: 1.4rem;
}     
     
}


@media screen and (max-width : 1000px){
     
.page-title-block {
     height: 400px;
}
     
.page-title-block2 {
     height: 400px;
}
     
.page-title-container {
     padding: 160px 0 0 0;
}     
     
.page-title-container2 {
     padding: 100px 0 0 0;
}
     
.page-title-container3 {
     padding: 70px 0 0 0;
}
     
.page-title-container4 {
     padding: 70px 0 0 0;
}
     
.page-title-container5 {
     padding: 60px 0 0 0;
}     
     
.page-title-graphic-container {
     display: block;
     width: 100%;
     margin: 0 auto;
}
     
.page-title-graphic-container2 {
     display: block;
     width: 100%;
     margin: 0 auto;
}
     
.page-title-graphic-container3 {
     display: block;
     width: 100%;
     margin: 0 auto;
} 
     
.page-title-graphic-container4 {
     display: block;
     width: 100%;
     margin: 0 auto;
}
     
.page-title-graphic-container5 {
     display: block;
     width: 100%;
     margin: 0 auto -20px auto;
}      

.page-title-graphic {
     width: 250px;
     margin: 0 auto;
}
     
.page-title-graphic2 {
     width: 280px;
     margin: 0 auto;
}
     
.page-title-graphic3 {
     width: 220px;
     margin: 0 auto;
}
     
.page-title-graphic4 {
     width: 200px;
     margin: 0 auto;
}
     
.page-title-graphic5 {
     width: 300px;
     margin: 0 auto;
}      

.page-title-text-container {
     display: block;
     width: 100%;
     margin: 0 auto;
}
     
.page-title-text-container2 {
     display: block;
     width: 100%;
     margin: 0 auto;
}     
     
.page-title {
     font-size: 3rem;
}
     
.page-title2 {
     font-size: 3.5rem;
}     

.page-description {
     font-size: 1rem;
}

#bottom-bar-middle {
     padding-left: 40px;
}   
     
}


@media screen and (max-width : 767px){    
     
.phone-link {
	text-decoration: underline !important;
}
     
.phone-link:hover {
     color: #85c2fe !important;
}    
     
.page-title {
     font-size: 2rem;
}     
     
#icon-bar {
     text-align: center;
}
     
.circle-icon {
     float: none;
     margin: 0 10px;
} 
     
.circle-icon2 {
     float: none;
     margin: 0 8px;
}      
     
#bottom-logo {
     margin: 0 auto;
}
     
#footer-bottom {
	display: none;	
}

#phone-footer-bottom {
	display: block;	
}     

}