html, body {
height: 100%;
background: #1b1b1b;
}
body { min-width: 320px }
h1 {
font-size: 21px;
line-height: 27px;
text-transform: uppercase;
}
a {
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
a:focus {
outline: none;
text-decoration: none;
}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
.form-control { box-shadow: none; }
body.active #wrapper { margin: 0 0 0 -260px; }
/* wrapper style */
#wrapper {
position: relative;
padding: 73px 0 0;
}
/* header style */
#header {
top: 0;
right: 0;
left: 0;
position: fixed;
z-index: 999;
}
#header:after {
display: block;
content: "";
clear: both;
}
#header.affix {
background: rgba(0, 0, 0, 0.8);
-webkit-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
/* top-bar styles */
.top-bar {
overflow: hidden;
background: #37B25B;
font-weight: 400;
padding: 7px 0;
}
address {
color: #fff;
margin: 4px 0 0;
}
address .address, address .phone {
position: relative;
padding: 0 0 0 19px;
float: left;
}
address .phone { margin: 0 0 0 50px; }
address .phone a { color: #fff; }
address .address span, address .phone span {
color: #ffffff;
position: absolute;
font-size: 16px;
left: 0;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.social-networks {
float: right;
font-size: 16px;
margin: 0;
}
.social-networks a { color: #fff; }
.social-networks a:hover {
text-decoration: none;
color: #ed1c24;
}
.header-holder {
padding: 26px 0;
background: #ffffff;
}
.header-bar {
padding-left: 420px;
position: relative;
}
.order-online {
top: 0;
left: 245px;
position: absolute;
color: #ed1c24;
font-size: 26px;
line-height: 28px;
font-weight: 600;
text-transform: capitalize;
background-color: #FF0000;
}
.order-online span {
color: #fff;
display: block;
font-size: 11px;
line-height: 13px;
font-weight: 400;
}
.order-online span a { color: #fff; }
.order-online span a:hover {
text-decoration: none;
color: #ed1c24;
}
/* logo of the web-site styles */
.logo {
left: 0;
top: 0;
position: absolute;
width: 169px;
height: auto;
}
.logo img {
margin-top: -18px;
display: block;
width: 100%;
height: auto;
}
/* main menu styles */
.navbar-default {
border: 0;
padding:0;
margin: 0;
border-radius: 0;
min-height: inherit;
padding: 0 130px 0 0;
position: relative;
background: transparent;
}
.navbar-default .navbar-collapse { padding: 0; }
.navbar-default .navbar-nav { float: right; }
.navbar-default .navbar-nav > li { padding: 0 0 0 15px; }
.navbar-default .navbar-nav > li > a {
color: #37B25B;
display: block;
font-size: 15px;
font-weight: 400;
padding: 8px 15px;
line-height: 17px;
position: relative;
text-transform: capitalize;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li:focus > a,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li.open:hover > a {
background: #37B25B;
color: #fff;
}
.btn-reservation {
font: 900 15px/17px "Open Sans", Arial, Helvetica, Sans-serif;
position: absolute;
padding: 6px 8px;
color: #37B25B;
right: 0;
top: 0;
}
.btn-default {
border-radius: 0;
border: 2px solid #FF0000;
}
.btn-default:hover {
border-color: #ed1c24;
background: #4eafd5;
color: #fff;
}
/* carousel styles */
.carousel {
color: #fff;
font: 32px/38px 'nexarustslab', Arial, Helvetica, Sans-serif;
}
.carousel h1 {
margin: 0 0 5px;
color: #88D8FF;
text-shadow: 0 0 5px #000;
text-transform: capitalize;
font: 83px/93px 'Great Vibes', cursive;
}
.carousel-inner > .item {
background-position: center bottom;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
padding: 140px 0 60px;
min-height: 403px;
}
/* main part style */
#main {
background: url(../images/bg-main.jpg);
position: relative;
overflow: hidden;
padding: 30px 0 18px;
}
/* intro styles */
.intro {
font-size: 28px;
line-height: 38px;
font-weight: 300;
padding-bottom: 70px;
}
/* history block styles */
.history-block { padding-bottom: 10px; }
.history-block:after {
display: block;
content: "";
clear: both;
}
.history-block .image-frame {
overflow: hidden;
width: 100%;
height: auto;
}
.history-block .image-frame img {
display: block;
width: 100%;
height: auto;
}
.history-block .text-box {
padding: 30px;
overflow: hidden;
margin: -47px 0 0 -110px;
background: #fff;
}
.history-block h1 {
font-size: 47px;
line-height: 57px;
font-weight: 300;
text-transform: uppercase;
margin: 0;
}
.history-block .sub-heading {
display: block;
font-size: 13px;
line-height: 15px;
font-weight: 300;
text-transform: uppercase;
margin: 0 0 15px;
}
/* experience block styles */
.experience-block h1 {
text-transform: uppercase;
font: 300 58px/70px "Open Sans", Arial, Helvetica, Sans-serif;
}
.experience-block h1 span {
display: block;
color: #88D8FF;
text-transform: none;
font: 400 52px/70px 'Parisienne', cursive;
}
.articles {
-webkit-box-shadow: 0 -29px 35px rgba(0,0,0,.21);
-moz-box-shadow: 0 -29px 35px rgba(0,0,0,.21);
box-shadow: 0 -29px 35px rgba(0,0,0,.21);
margin: 0 0 15px;
}
.articles:after {
display: block;
content: "";
clear: both;
}
.article { padding: 0 0 20px; }
.article .image-frame {
width: 100%;
height: auto;
overflow: hidden;
margin: 0 0 15px;
}
.article .image-frame img {
display: block;
width: 100%;
height: auto;
}
.article .title-bar {
padding: 0 40px 0 0;
position: relative;
}
.article h2 {
margin: 0 0 5px;
padding: 0 0 0 10px;
text-transform: uppercase;
text-overflow:ellipsis;
white-space: nowrap;
overflow: hidden;
position: relative;
font: 600 13px/15px "Open Sans", Arial, Helvetica, Sans-serif;
}
.title-bar .price {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
font: 600 13px/15px "Open Sans", Arial, Helvetica, Sans-serif;
}
.article .title {
display: block;
padding: 0 0 0 10px;
font: 400 11px/13px "Open Sans", Arial, Helvetica, Sans-serif;
}
/* services styles */
.services { overflow: hidden; }
.heading-bar {
overflow: hidden;
background: #FF0000;
padding: 10px 15px;
position: relative;
}
.heading-bar:after {
background: #fff;
position: absolute;
content: "";
height: 2px;
left: 10px;
right: 10px;
bottom: 0;
}
.heading-bar h1 {
margin: 0;
color: #fff;
text-transform: none;
font: 400 40px/46px 'Parisienne', cursive;
}
.services .text-block {
overflow: hidden;
background: #333;
margin: 0 0 15px;
padding: 10px;
color: #fff;
}
.services h2 {
margin: 0 0 10px;
font: 300 33px/37px "Open Sans Condensed", Arial, Helvetica, Sans-serif;
}
.text-block .availability,
.text-block .time { display: block; }
.text-block .availability {
text-transform: uppercase;
font: 34px/38px "Campton-BoldDEMO", Arial, Helvetica, Sans-serif;
}
.text-block .time {
margin: 0 0 10px;
font: 300 20px/24px "Open Sans", Arial, Helvetica, Sans-serif;
}
.text-block .btn-default {
display: block;
text-transform: capitalize;
font: 900 22px/26px "Open Sans", Arial, Helvetica, Sans-serif;
}
.order-box {
color: #fff;
overflow: hidden;
padding: 28px 0;
background: #37B25B;
font: 700 26px/34px "Oswald", Arial, Helvetica, Sans-serif;
}
.order-box p { margin: 0; }
.btn-order {
color: #fff;
display: block;
padding: 15px;
border-radius: 20px;
background: #333333;
text-transform: uppercase;
border: 2px solid #000;
font: 900 25px/25px "Open Sans", Arial, Helvetica, Sans-serif;
}
.btn-order span {
display: block;
font-weight: 400;
}
.btn-order:hover {
color: #000;
background: transparent;
}
/* footer styles */
.b-container {
color: #fff;
overflow: hidden;
background: #262626;
padding: 29px 0 0;
font-size: 15px;
line-height: 20px;
}
.footer-aside {
overflow: hidden;
padding-bottom: 29px;
}
.footer-aside .logo {
width: 144px;
display: block;
float: none;
position: static;
margin: 0 0 15px;
}
.footer-aside .social-networks {
float: left;
width: 100%;
font-size: 22px;
margin: 30px 0 15px -10px;
}
.footer-aside .social-networks li { margin: 0; }
.footer-aside .heading {
display: block;
margin: 0 0 20px;
font: 700 15px/17px "Open Sans", Arial, Helvetica, Sans-serif;
}
.footer-aside ul {
margin: 0;
font: 400 14px/21px "Open Sans", Arial, Helvetica, Sans-serif;
}
.footer-aside ul li + li { margin: 15px 0 0; }
.footer-aside ul li a { color: #fff; }
.footer-aside ul li a:hover {
text-decoration: none;
color: #d00008;
}
.footer-aside address { margin: 0; }
.footer-aside address .address,
.footer-aside address .phone,
.footer-aside address .email,
.footer-aside address .website {
display: block;
float: none;
padding: 0 0 0 20px;
position: relative;
margin: 0 0 15px;
}
.footer-aside address a { color: #fff; }
.footer-aside address a:hover {
text-decoration: none;
color: #d00008;
}
.footer-aside address [class^="icon-"] {
position: absolute;
color: #37B25B;
font-size: 14px;
line-height: 14px;
left: 0;
top: 4px;
transform: translateY(0);
}
#footer {
font: 400 14px/16px "Open Sans", Arial, Helvetica, Sans-serif;
border-top: 1px solid #424242;
background: #1b1b1b;
padding: 20px 0;
color: #fff;
}
#footer p { margin: 0; }
#footer a { color: #fff; }
#footer a:hover {
text-decoration: none;
color: #d00008;
}
.f-nav ul {
margin: 0;
float: right;
list-style: none;
text-transform: capitalize;
}
.f-nav ul li + li { padding: 0 0 0 40px; }
.gallery-list {
font-size: 0;
line-height: 0;
width: 100%;
overflow: hidden;
margin: 0 0 15px -15px!important;
}
.gallery-list li, .gallery-list li + li {
float: left;
width: 33%;
margin: 0!important;
padding: 0 0 15px 15px!important;
}
.gallery-list li img {
display: block;
width: 100%;
height: auto;
}
.gallery-list li a:hover img { opacity: 0.9; }
/* --------------------------------------
Styles for responsive breakpoints
--------------------------------------*/
@media only screen and (min-width:1025px) {
a[href^=tel], a[href^=skype], a[href^=sms] {
cursor: default;
pointer-events: none;
}
}
@media screen and (max-width:1199px) {
.order-box { font-size: 20px; }
#header .logo { width: 170px; }
.header-bar { padding-left: 360px; }
.order-online { left: 180px; }
}
@media screen and (max-width:991px) {
address .address, address .phone {
float: none;
display: block;
margin: 0;
}
.header-bar { padding-left: 170px; }
.navbar-default .navbar-nav > li { padding: 0 0 0 10px; }
.heading-bar h1 {
font-size: 36px;
line-height: 40px;
}
.services h2 {
font-size: 24px;
line-height: 30px;
}
.order-box {
font-size: 16px;
line-height: 28px;
}
.btn-order { font-size: 20px; }
.b-container, .footer-aside ul { font-size: 13px; }
.footer-aside .social-networks { font-size: 18px; }
.experience-block h1 {
font-size: 40px;
line-height: 44px;
}
.text-block .availability { font-size: 24px; }
.services .text-block { font-size: 12px; }
.order-online {
position: static;
display: block;
margin: 0 0 10px 15px;
}
.order-online { font-size: 18px; }
.order-online span { display: inline; }
}
@media screen and (max-width:767px) {
.top-bar { display: none; }
body.active #header.affix { position: absolute; }
.header-bar {
padding: 0;
text-align: center;
}
.order-online { margin: 0; }
.order-online span { display: block; }
#wrapper {
width: 100%;
float: left;
-webkit-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.header-holder { min-height: 70px; }
.navbar-default {
padding: 0;
border: 0;
box-shadow: none;
background: none;
}
.navbar-default .navbar-nav {
float: none;
margin: 0 0 10px;
text-align: center;
}
.navbar-default .navbar-nav > li,
.navbar-default .navbar-nav > li:first-child {
padding: 5px 15px;
margin: 0;
}
.navbar-default .navbar-nav > li.open > a span { background: none; }
.navbar-default .navbar-nav > li > a { font-size: 14px; }
.navbar-default .navbar-collapse {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
-webkit-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
width: 260px;
border: 0;
height: 100%!important;
background: #000;
padding: 25px 0;
position: fixed;
display: block;
z-index: 999;
right: -260px;
top: 0;
}
.navbar-default .navbar-toggle {
background: rgba(0, 0, 0, 0.8);
position: absolute;
margin: 0;
border: 2px solid #fff;
padding: 5px;
right: 10px;
width: 40px;
height: 35px;
top: -32px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background: rgba(0, 0, 0, 0.8); }
.navbar-default .navbar-toggle:before,
.navbar-default .navbar-toggle:after,
.navbar-default .navbar-toggle span {
background: #fff;
border-radius: 4px;
position: absolute;
top: 16px;
left: 20%;
right: 20%;
height: 3px;
margin-top: -2px;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.navbar-default .navbar-toggle:before,
.navbar-default .navbar-toggle:after {
content: "";
top: 10px;
}
.navbar-default .navbar-toggle:after { top: 22px; }
body.active .navbar-toggle span { opacity: 0; }
body.active .navbar-toggle:before,
body.active .navbar-toggle:after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 16px;
left: 15%;
right: 15%;
}
body.active .navbar-toggle:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
body.active .navbar-collapse { right: 0; }
.btn-reservation {
position: static;
display: block;
margin: 0 15px;
}
#header .logo { left: 10px; }
.intro {
font-size: 22px;
line-height: 28px;
padding-bottom: 20px;
}
.history-block .text-box {
margin: 0;
padding: 15px;
}
.history-block h1, .experience-block h1, .experience-block h1 span {
font-size: 30px;
line-height: 36px;
}
.order-box { padding: 10px 15px; }
.order-box p { margin: 0 0 10px; }
.btn-order {
border-radius: 10px;
padding: 10px 15px;
}
.footer-aside .heading { margin: 0 0 10px; }
.footer-aside ul { margin: 0 0 30px; }
.footer-aside ul li + li { margin: 5px 0 0; }
#footer {
text-align: center;
font-size: 13px;
}
#footer p { margin: 0 0 15px; }
.f-nav {
float: none;
width: 100%;
overflow: hidden;
text-align: center;
}
.f-nav ul { float: none; }
.heading-bar, .services .text-block { height: auto!important; }
.footer-aside { padding-bottom: 15px; }
.footer-aside address [class^="icon-"] { top: 2px; }
.f-nav ul { font-size: 13px; }
.f-nav ul li, .f-nav ul li + li { padding: 0 8px; }
.footer-aside .social-networks { margin: 0 0 20px -8px; }
}
@media screen and (max-width:639px) {
.carousel {
font-size: 20px;
line-height: 30px;
}
.carousel h1 {
font-size: 60px;
line-height: 70px;
}
.carousel-inner > .item {
min-height: 350px;
padding: 120px 0 20px;
}
#header .logo {
width: 130px;
display: block;
position: static;
margin: 0 auto 10px;
}
.order-online {
padding: 0 10px;
font-size: 20px;
line-height: 30px;
}
.navbar-default .navbar-toggle { top: -95px; }
}
/* Fonts Icons generated by icomoon */
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?yxfhcj');
src: url('../fonts/icomoon.eot?yxfhcj#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?yxfhcj') format('truetype'),
url('../fonts/icomoon.woff?yxfhcj') format('woff'),
url('../fonts/icomoon.svg?yxfhcj#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-globe:before { content: "\e900"; }
.icon-envelope:before { content: "\e901"; }
.icon-pinterest:before { content: "\e902"; }
.icon-youtube:before { content: "\e903"; }
.icon-location:before { content: "\e904"; }
.icon-facebook:before { content: "\ea90"; }
.icon-twitter:before { content: "\ea96"; }
.icon-rss:before { content: "\ea9b"; }
.icon-linkedin:before { content: "\eaca"; }
.icon-phone:before { content: "\e905"; }
.icon-instagram:before { content: "\e906"; }
.icon-google:before { content: "\e907"; }
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 26, 2017 */
@font-face {
font-family: 'nexarustslab';
src: url('../fonts/nexarustslab.eot');
src: url('../fonts/nexarustslab.eot?#iefix') format('embedded-opentype'),
url('../fonts/nexarustslab.woff') format('woff'),
url('../fonts/nexarustslab.ttf') format('truetype'),
url('../fonts/nexarustslab.svg#nexarustslab') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Campton-BoldDEMO';
src: url('../fonts/Campton-BoldDEMO.eot');
src: url('../fonts/Campton-BoldDEMO.eot?#iefix') format('embedded-opentype'),
url('../fonts/Campton-BoldDEMO.woff') format('woff'),
url('../fonts/Campton-BoldDEMO.ttf') format('truetype'),
url('../fonts/Campton-BoldDEMO.svg#Campton-BoldDEMO') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BigJohn';
src: url('../fonts/BigJohn.eot');
src: url('../fonts/BigJohn.eot?#iefix') format('embedded-opentype'),
url('../fonts/BigJohn.woff') format('woff'),
url('../fonts/BigJohn.ttf') format('truetype'),
url('../fonts/BigJohn.svg#BigJohn') format('svg');
font-weight: normal;
font-style: normal;
}