* {border:0;padding:0;margin:0;line-height:100%;text-decoration:none;font-size:14pt;} body {background:#000000;color:#FFFFFF;font-family: "Bad Script", cursive!important;} .accessibilityLinks {text-indent:-5000px;position:fixed;} html {max-width:100vw;overflow-x:hidden;background:#000000} .button {background:#8c98a9;color:#ffffff;padding:10px 25px;} .btn.btn-outline-white.color {border-color: #17527e;color:#ffffff} .BUTTON {border:solid #ffffff 1px!important;background:#007797;color:#ffffff!important;font-family: "Work Sans", sans-serif!important;text-transform:lowercase;border-radius:10px!important;padding:10px 25px;font-size:12pt!important;margin-top:30px;display:inline-block;margin-left:10px;margin-right:10px;} .mainheader {text-indent:-5000px;position:fixed;} a {color:#007797;} p {font-size:16pt;line-height:20pt} b {font-size:110%;} .bg-light {background:#000000!important;} .bg-light p {color:#ffffff;} .white {color:#ffffff!important;} ul li {list-style-position:inside;line-height:35px;} .textCenter {text-align:center} .COLOR {color:#007797!important} .track {position:FIXED;width:100vw;height:100vh;background:#000000;z-index:1;opacity:0.2} .mainLogo {position: absolute;z-index: 3;width: 100%;max-width: 800px;left: 62.5%;margin-left: -400px;text-align: center;top: 150px;} .pages {width:100%;top:250px;} .announce {position:absolute;top:0;text-align:center;left:0;width:100%;background:#181f19;z-index:10;padding:10px 0;color:#ffffff;} .offset {margin-top:100px;} .story p {font-size:20pt;line-height:1.4em;} .h1 {font-size:30pt;} /*HEADERS ####################################################### */ .TEXT, .TEXT * {font-family: "Work Sans", sans-serif!important;} h1, h2, h3, h4, h5, h6 {color:#ffffff;clear:both;margin:0 auto;position:relative;font-family: "Work Sans", sans-serif!important;font-weight:600;} h1 {font-size: 36pt;margin: 10px auto 40px auto;background-size: contain;display: inline-block;text-align: center;width: 100%;color:#ffffff;font-family: "Bad Script", cursive!important;line-height:1.4em;font-weight:200} h1:after {width:300px;height:2px;background:#007797;content:"";position:absolute;bottom:-15px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)} h1.home {margin:10px auto 0 auto;font-size:30pt;} h2 {font-size:16pt;margin-bottom:60px;font-size:50pt;} .mainLogo h2 {font-size:30pt;margin-bottom:20px;} h2 span:after {width:300px;height:2px;background:#ffffff;content:"";position:relative;bottom:-15px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);display:block;} h2.COLOR {font-size:24pt;} h3 {font-size:24pt;color:#ffffff;} h4 {margin:20px 0 0 0;padding:2px;display:block;} h5 {margin:0 0 15px 0;} .bg-light h2 {} .bg-light h2:after {background:#007797;} .mainHeader {font-size:20pt;margin-bottom:40px;color:#565656} .mainHeader:after {width:300px;height:2px;background:#ffffff;content:"";position:absolute;bottom:-15px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)} .logo {font-family: "Work Sans", sans-serif!important;font-size:60pt;font-weight:600;color:#ffffff;} .icon {position: relative;padding: 0;line-height: 1.3;} .icon::after, .icon::before {position: absolute;top: 51%;left: 0;right: 0;width: 300px;height: 1px;content: '';margin: 0 auto;background: #e3e3e3;z-index: -1;} span.icon {display: block;font-size: 18px;font-style: italic;margin-bottom: 10px;font-family: "Lora", Georgia, serif;color: #969696;font-weight: 400;} .icon i {font-size: 60px;padding: 0 20px;background: #FBFBFB;color: #b0b0b0;} .flaticon-cutlery::before {content: "\f101";} [class^="flaticon-"]::before, [class*=" flaticon-"]::before, [class^="flaticon-"]::after, [class*=" flaticon-"]::after {font-family: Flaticon;font-style: normal;} .icon::after {top: 48%;width: 300px;} .icon img {max-width: 100px;margin: 0 15px;background: #f3f3f3;padding: 0 10px;} .dinner {margin-top:-40px;z-index:15;position:relative;} /*NAVIGATION ####################################################### */ .clearheader {padding:0!important;position:fixed;z-index:5000;text-align:center;} .clearheader .navbar {padding-top: .2rem;padding-bottom: .5rem;} header nav {margin:0 auto 0 300px;padding-top:15px!important;} header nav div ul li a.nav-link {text-transform:lowercase;font-size:11pt!important;color:#ffffff!important;font-family: "Work Sans", sans-serif!important} .navbar-brand {font-family: "Work Sans", sans-serif!important;font-weight:600;padding-top:15px;padding-bottom:15px;} .darkheader {} .darkheader .navbar-brand img {max-width:100px;} header {height:75px} header.darkheader {background: linear-gradient(180deg,rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);height:150px;} .hover-underline-animation {display: inline-block;position: relative;color: #0087ca;} .hover-underline-animation::after { content: '';position: absolute; width: 100%;transform: scaleX(0);height: 2px;bottom: 0;left: 0;background-color: #007797;transform-origin: bottom right;transition: transform 0.25s ease-out;} .hover-underline-animation:hover::after {transform: scaleX(1);transform-origin: bottom left;} h1.home::after {background:none;} /* CONTENT ####################################################### */ .intro {min-height:105px;} .section {padding: 10em 0;position: relative;z-index: 2;max-width: 78vw;width: 100%;margin-left: 20%;} .section p {color:#ffffff;} .section1 .container {padding:150px 0 0 0;} .section2 .container {padding:50px 0 150px 0;} .section2, .section3 {padding:5em 50px;} .section3 .container {padding:0px 0 0 0;z-index:5;} .fadeTop {margin-top:-120px;background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 15%);z-index:2;position:relative;} .spacer {height:100px;width:100%;} .spacer100 {width:100%;height:100px;} .parallaxone {background-image: url(../../pix/nebula.jpg);} .parallaxone h2 {max-width:800px} .parallaxtwo {background-image: url(../../pix/home/parallax2.jpg);} .parallaxtwo h2 {max-width:800px;} .parallaxthree {background-image: url(../../pix/home/parallax3.jpg);} .parallaxthree h2 {max-width:800px;} .parallax-drink {background-image: url(../../pix/home/parallax-drink.jpg);} .parallax {text-align:center;min-height: 900px;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;} .parallax h2 {font-size:24pt;color:#ffffff;text-shadow:rgba(0,0,0,0.7) 2px 2px 3px;display:inline-block;padding-top:15%;padding-bottom:10%;max-width:1140px;} .parallax h2 span {font-size:18pt;font-weight:800;font-family: "Montserrat", sans-serif!important;} .parallax h2 span::before {width:280px;height:2px;background:#007797;content:"";position:relative;bottom:-15px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);display:block;margin:15px 0} .parallax h2 span::after {background:none;height:0;} .inline {padding:6px;border:solid #000000 1px;} .alignTop {align-self:stretch} .ctaWrapper {background:#000000;display:block;position:absolute;z-index:5;bottom:15px;padding:20px;border-top-right-radius:15px;border-bottom-right-radius:15px;width:400px;left:-320px;background:#000000;text-align:right;} .ctaWrapper:hover {left:0;width:350px;} .ctaWrapper:hover .remove {display:none;} .ctaBox {display:inline-block;vertical-align:top;text-align:left;width:150px;} .ctaBox h4 {color:#ffffff;font-size:14pt;display:none;} .CTA p {font-size:20px;color:#000000} .ctaBox a {line-height:40px;} .ctaBox a span {font-size: 12pt;position: relative;bottom: 12px;left: 10px;} .ctaicon {display:inline-block;float:none;color:#deb71e} .story {max-width:30%;width:30%;display:inline-block;vertical-align:top;margin:30px 1%;} .story h3 {height:110px;} .story b {color:#007797;font-size:26pt;padding-bottom:10px} .comingSoon {background:#007797;display:inline-block;color:#ffffff;z-index:11;font-family: "Work Sans", sans-serif!important;padding:15px;margin-top:-15px;position:relative;top:-17px;left:20px;font-weight:normal;font-size:18pt} .pageheader {background:#007797;color:#ffffff;padding:15px;border-radius:15px} hr.COLOR {background:#007797;color:#007797;max-width:300px;margin:40px auto;height:1px} section .container p {line-height:35px;} .serviceWrapper {text-align:center;margin: 0 auto;max-width:1200px;} .services {width:100%;max-width:300px;height:400px;background-size:contain;background-position:bottom center;display:inline-block;position:relative;margin:2px 0;border:solid #000000 1px;border-image-outset:6px;} .services h2::after {width: 180px;} .menu {max-width:25%;} .sone {background: url(../../pix/home1.jpg?ver=3) ;background-size:cover;background-position:bottom center;} .stwo {background: url(../../pix/home2.jpg?ver=123);background-size:cover;background-position:bottom center;} .sthree {background: url(../../pix/home3.jpg?ver=123);background-size:cover;background-position:bottom center;} .sfour {background: url(../../pix/food/a.jpg);background-size:cover;background-position:bottom center;} .sfive {background: url(../../pix/food/c.jpg);background-size:cover;background-position:bottom center;} .services p {position:absolute;bottom:75px;width:100%;text-align:center;} .services h2 {font-size:30px;position:absolute;top:150px;color:#ffffff;text-align:center;width:100%;text-shadow:rgba(0,0,0,0.8) 2px 2px 2px;} .services::before { content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;} .services:hover::before {background: rgba(0, 0, 0, 0);} .fixedScroll img {max-width:90%;} /* CONTACT FORM ####################################################### */ .contactForm {display:inline-block;width:100%;text-align:left;vertical-align:top;} .contactTwo {display:inline-block;max-width:50%;width:100%;} .contactIcon {width:90px;height:90px;display:inline-block;} .contactText {display:inline-block;vertical-align:top;} .contactText h4 {padding-bottom:10px;display:block;text-align:left;} .contactForm p {font-size:12pt;padding:0!important;} .contactForm .contactColumn {width:40%;display:inline-block;vertical-align:top;} .contactForm .input {width:100%;max-width:80%;padding:6px 10px;background:#ffffff;margin:4px 0;color:#000000;border:solid #cccccc 1px;font-size:11pt;} .contactForm .SendButton {background:#582c71;color:#efefef;padding:8px 50px;font-size:18px;cursor:pointer} .contactForm .CancelButton {display:none;background:#007788;color:#efefef;padding:8px 25px;} .contactForm label {display:none;} .contactMap {width:100%;border:solid #000000 2px;height:400px;} .theme {display:inline-block;width:100%;max-width:250px;background:#000000;text-align:center;min-height:150px;vertical-align:top;padding:10px 0 30px 0;} .theme h3, .theme h4 {color:#deb71e} .theme h3 {min-height:70px;} .theme h4 {font-size:16pt;} .menus {display:none;position:fixed;top:0;height:100%;width:100%;left:0;background:rgba(0,0,0,0.6);z-index:100002;text-align:center;} .menus .closer {position:absolute;cursor:pointer;top:0;left:0;width:100%;height:100%;z-index:0;padding:6px 0;color:#ffffff;} .menus img {position:relative;z-index:1;margin:3vh 0;} .fixedScroll {position:relative;overflow-y:scroll;height:100vh;} .specials {position:absolute;bottom:15px;right:20px;z-index:5;max-width:250px;background:#222121;text-align:center;padding:5px 15px 15px 15px;border-radius:15px;} .specials h4 {padding:0;margin:0;color:#ffffff;} .specials img {max-width:170px;} img.specialPOP {max-width:700px;} .themeContact {position: absolute;bottom: 0;z-index: 100;left: 0;background:#000000} /* GALLERY ####################################################### */ .gallery {max-width:1200px;margin:0 auto;text-align:center;} .row > .column {padding: 0 8px;} .row:after {content: "";display: table;clear: both;} .row {text-align:center;} .aos-gallery {display:inline-block;width: 22%;margin:1.5%;text-align:center;height:155px;overflow:hidden;} .aos-gallery img {max-width:100%;cursor:pointer;} .aos-gallery img:hover {opacity:0.7;} .modal {display: none;position: fixed;z-index: 10000;padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: black;} .modal-content {position: relative;margin: auto;padding: 0;width: 90%;max-width: 1200px;overflow:hidden;} .close {color: white;position: absolute;top: 80px;right: 25px;font-size: 35px;font-weight: bold;} .close:hover, .close:focus {color: #999;text-decoration: none;cursor: pointer;} .mySlides {display: none;} .prev, .next {cursor: pointer;position: absolute;top: 50%;width: 50%;padding: 16px;margin-top: -50px;color: white!important;font-weight: bold;font-size: 20px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none;-webkit-user-select: none;} .prev {left:0;text-align:left;} .next {right: -50;border-radius: 3px 0px 0px 3px;margin-right: -50%;text-align: right;} .prev:hover, .next:hover {background-color: rgba(0, 0, 0, 0.8);} .numbertext {color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 0;} .caption-container {text-align: center;background-color: black;padding: 2px 16px;color: white;} img.demo {opacity: 0.6;max-width:10%;} .active, .demo:hover {opacity: 1;} img.hover-shadow {transition: 0.3s;} .hover-shadow:hover {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);} .mySlides img {width:inherit!important;height:100vh!important} .bottomFooter .section {padding:3em 0;} /* TOP OF PAGE ####################################################### */ .skip {max-width:50px;position:fixed;z-index:10;bottom:10px;right:20px;} .skip img {width:100%;} .owl-prev {background: url(../../pix/nav.png) center bottom!important;width:30px;} .owl-next {background: url(../../pix/nav.png) center top!important;width:30px;} .ion-chevron-left::before, .ion-chevron-right::before {content: "\f124";visibility: hidden;} /* FOOTER ####################################################### */ footer {background:#000000;padding:0 0 0 0!important;} footer * {color:#ffffff!important;text-align:left;line-height:30px;} footer img {max-width:250px;} footer ul li {margin-bottom:3px!important;} footer .fixedScroll {text-align:center;} .footerLogo {font-weight:600;font-size:30pt;font-family: "Work Sans", sans-serif!important;} .mobileTable {display:none;padding:0 25px} /* BJC SIGNOFF */ .bottomFooter {background:#007797;margin:0;padding:15px 0;} .bottomFooter p, .bottomFooter p a {color:#ffffff;font-size:11pt;text-align:center!important;} #open_preferences_center {position:fixed;bottom:0;left:0;} .menuMobile {display:none;} .heightBlocker {height: 100%;max-height: 130vh;overflow: hidden;position: fixed;left: 0;width: 20%;top: 0;display: block; z-index: 10; } .film-strip {display: flex;align-items: center;height: 220px;padding: 30px 0;box-sizing: border-box;background: url(../../pix/film.jpg) center center repeat;background-size:contain;position: relative;transform: rotate(95deg);transform-origin: top left;top: -110px;left: 300px;z-index: 10;animation: scrollFilm 15s linear infinite;width: calc(200px * 8);animation: scrollFilm 15s linear infinite;} .film-slot {display: inline-block;margin: 0 5px;position: relative;height: 100%;overflow: hidden;border: 5px solid #232323;box-shadow: 0 0 10px rgba(0,0,0,0.8);width: 200px;flex: 0 0 auto;} .film-slot img {position: absolute;top: 0; left: 0;width: 180px;height: 100%;object-fit: cover;opacity: 0;transition: opacity 2s ease-in-out;} .film-slot img.active {opacity: 1;} .grain {pointer-events: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url("https://www.transparenttextures.com/patterns/asfalt-light.png");opacity: 0.15;mix-blend-mode: overlay;z-index: 5;} @keyframes scrollFilm { 0% { transform: rotate(95deg) translateX(0); } 100% { transform: rotate(95deg) translateX(-210px); } /* one slot width (200px + margin) */ } @media screen and (max-width: 1500px) { .heightBlocker {width:300px;} .navbar-expand-md .navbar-nav .nav-link {padding-right: .5rem;padding-left: 0;} @keyframes scrollFilm { 0% { transform: rotate(90deg) translateX(0); } 100% { transform: rotate(90deg) translateX(-210px); } /* one slot width (200px + margin) */ } .film-strip {left:225px;} .parallax h2 {max-width:70%;} .section {padding:inherit 50px!important} .section2 {padding:inherit 80px!important} footer .container {margin-left:25%;} } @media screen and (max-height: 800px) { .slider-wrap {max-height:inherit;} } @media screen and (max-width: 1200px) { header nav {margin:0 auto 0 240px;} } @media screen and (max-width: 1080px) { .section {max-width:70vw;margin-left:25%;} .mainLogo {max-width: 70%;left: inherit;margin-left: 25%;} .story {max-width: 47%;width: 47%;display: inline-block;vertical-align: top;margin: 30px 1%;} } @media screen and (max-width: 1350px) { .CTABox {max-width: 49.6%;margin:2px 0;} .menu {width:100%;max-width: 300px;} } @media screen and (max-width:1120px){ header .navbar {padding:0.5rem 0 1rem 0;} header .navbar ul {background:#000000;margin-top:13px;} header .navbar ul li {padding:14px 15px;border-bottom: dashed 1px #ffffff;} .navbar-dark .navbar-toggler {margin-right:25px;cursor:pointer;} .navbar-dark .navbar-brand {margin-left:25px;} } @media screen and (max-width: 960px) { .story {max-width: 100%;width: 100%;display: inline-block;vertical-align: top;margin: 30px auto;} .intro {min-height:0;} footer .container {margin-left:5%;} @keyframes scrollFilm { 0% { transform: rotate(0deg) translateX(0); } 100% { transform: rotate(0deg) translateX(-210px); } /* one slot width (200px + margin) */ } .film-strip {height: 120px;background: url(../../pix/film.jpg) center center repeat;transform: rotate(95deg);transform-origin: top left;top:initial;bottom:0;left: 0;z-index: 10;bottom:0;background-size:contain;padding:10px 0;} .heightBlocker {display:none;width:100%;height:120px;max-height:100%;bottom:0;top:initial;} .film-slot {width:100px;} .film-slot img {width: 100px;height: 100%;transform: rotate(90deg);transform-origin: center center;} header nav {margin:0} .mainLogo {margin-left:0;max-width:100%;top:10%;padding:0 25px} .section {max-width:100vw;margin-left:0;} footer .row {} .fadeTop {} .slider-wrap {max-height:100%;padding-bottom:120px;} .bottomFooter {padding:100px 25px 100px 25px;} .logo {font-size:40pt;} h1 {font-size:28pt!important;} .parallax {padding-top:50px;} } @media screen and (max-width: 850px) { .parallax h2 {font-size: 26pt;padding-top: 30%;} .parallax h2 span {font-size: 30pt;} .mainLogo::before, .mainLogo::after {display:none;} .mainLogo .desc2 {display:none;} } @media screen and (max-width: 767px) { .tableHide {display:none;} .mobileTable {display:block;} .padtop {padding-top:80px!important;} } @media screen and (max-width: 700px) { footer .container {margin-left:0;} .CTA {text-align:center;} .CTABox {max-width: 99.6%;margin:2px auto;width:100%;display:inline-block;} .CTABox p {font-size:11pt;left:60px;} .CTABox h4 {font-size:12pt;left:60px;} .ctaWrapper {bottom:55px;} .section1 .container {padding: 0px 0 100px 0;} section .container {text-align:center;max-width:94%;} .row {margin-left:0;margin-right:0;} .logo {max-width:80%;margin:0 auto;} .contactForm {max-width:90%;text-align:left;vertical-align:top;} .contactTwo {max-width:90%;width:100%;} .mainHeader {font-size: 30px;} header .navbar {padding:0.5rem 0 1rem 0;} header .navbar ul {background:#000000;margin-top:13px;} header .navbar ul li {padding:14px 15px;border-bottom: dashed 1px #ffffff;} .navbar-dark .navbar-toggler {margin-right:25px;cursor:pointer;} .navbar-dark .navbar-brand {margin-left:25px;} h2 {font-size:40pt;} .parallax h2 {font-size:20pt;} .parallax h2 span {font-size:16pt;} .aos-gallery { display: inline-block; width: 44%; margin: 1.5%; text-align: center; height: 125px; overflow: hidden; } .parallax {text-align:center;min-height: 500px;background-attachment: initial;background-position: center;background-repeat: no-repeat;background-size: cover;} } @media screen and (max-width: 500px) { }