#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 99;
}
#status {
border: 3px solid #333;
border-radius: 40px;
height: 40px;
left: 50%;
margin: -20px 0 0 -20px;
opacity: 0;
top: 50%;
width: 40px;
z-index: 1007;
-webkit-animation: pulsate 1s ease-out infinite;
-moz-animation: pulsate 1s ease-out infinite;
-ms-animation: pulsate 1s ease-out infinite;
-o-animation: pulsate 1s ease-out infinite;
animation: pulsate 1s ease-out infinite;
position: absolute;
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
}
#legal {
text-align: center;
color: rgba(85, 85, 85, 0.94);
font-size: 12px;
line-height: 1.5em;
}

@-webkit-keyframes pulsate {
  0% {
transform: scale(0.1);
opacity: 0.0;
  }
  50% {
opacity: 1;
  }
  100% {
transform: scale(1.2);
opacity: 0;
  }
}
@keyframes pulsate {
  0% {
transform: scale(0.1);
opacity: 0.0;
  }
  50% {
opacity: 1;
  }
  100% {
transform: scale(1.2);
opacity: 0;
  }
}
@-moz-keyframes pulsate {
  0% {
transform: scale(0.1);
opacity: 0.0;
  }
  50% {
opacity: 1;
  }
  100% {
transform: scale(1.2);
opacity: 0;
  }
}
@-o-keyframes pulsate {
  0% {
transform: scale(0.1);
opacity: 0.0;
  }
  50% {
opacity: 1;
  }
  100% {
transform: scale(1.2);
opacity: 0;
  }
}
@-ms-keyframes pulsate {
  0% {
transform: scale(0.1);
opacity: 0.0;
  }
  50% {
opacity: 1;
  }
  100% {
transform: scale(1.2);
opacity: 0;
  }
}
.col-lg-9 {
    width: 70%;
}

/* Page Layout Styles
------------------------------------------------------------------------- */
@font-face {
font-family: GreatVibes-Regular;
src: url(../fonts/GreatVibes-Regular.ttf);
}

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700); /* Basic
------------------------------------------------------------------------- */
body {
font-family: 'Roboto', "Helvetica Neue",Helvetica,Arial,sans-serif;
}

button {
font-family: 'Roboto', "Helvetica Neue",Helvetica,Arial,sans-serif;
}

p {
font-weight: 400;
font-size: 16px;
line-height: 27px;
color: #000;
}

h2 {
font-family: GreatVibes-Regular;
font-size: 50px;
display: block;
padding-bottom: 15px;
margin-bottom: 15px;
text-shadow: 0 0 2px #000, 0 0 3px #000 , 0 0 4px #000;
color: turquoise;
}

h3 {
font-family: GreatVibes-Regular;
padding-bottom: 15px;
margin-bottom: 0;
font-weight: 500;
font-size: 44px;
text-shadow: 0 0 2px #000, 0 0 3px #000 , 0 0 4px #000;
color: turquoise;
}

h5 {
font-family: GreatVibes-Regular;
padding-bottom: 15px;
margin-bottom: 30px;
font-weight: 500;
font-size: 54px;
text-align: center;
}

/* Font icons
------------------------------------------------------------------------- */
@font-face {
font-family: "prasto-font-icons";
src: url("../fonts/prasto-font-icons.eot");
src: url("../fonts/prasto-font-icons.eot?#iefix") format("embedded-opentype"), url("../fonts/prasto-font-icons.woff") format("woff"), url("../fonts/prasto-font-icons.ttf") format("truetype"), url("../fonts/prasto-font-icons.svg#prasto-font-icons") format("svg");
font-weight: normal;
font-style: normal;
}

[data-icon]:before {
font-family: "prasto-font-icons" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "prasto-font-icons" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
content: "\e000";
}

.icon-twitter:before {
content: "\e001";
}

.icon-google-plus:before {
content: "\e002";
}

.icon-instagram:before {
content: "\e003";
}

.icon-user:before {
content: "\e004";
}

.icon-envelope:before {
content: "\e005";
}

.icon-phone:before {
content: "\e006";
}

.icon-date:before {
content: "\e007";
}

.icon-clock:before {
content: "\e008";
}

.icon-restaurant:before {
content: "\e009";
}

.icon-cross:before {
content: "\e00a";
}

/* Main Menu Section
------------------------------------------------------------------------- */
.main-menu {
text-align: center;
padding-top: 30px;
}

.brand img {
display: inline-block;
}

.main-menu {
box-shadow: none;
background: #131312;
}

.menu-items {
margin-top: 20px;
}

.pushy li a {
padding: 10px 30px;
}

.pushy a {
border: none;
}

.pushy a:hover {
background: none;
}

.main-menu li a {
border: none;
font-weight: 400;
font-size: 14px;
text-transform: uppercase;
}

.main-menu li a:hover {
background: #212121;
}

#hamburger {
box-sizing: border-box;
display: block;
width: 70px;
height: 45px;
top: 30px;
right: 30px;
position: fixed;
z-index: 4;
cursor: pointer;
-webkit-transition: right 0.4s ease;
-moz-transition: right 0.4s ease;
-ms-transition: right 0.4s ease;
-o-transition: right 0.4s ease;
transition: right 0.4s ease;
background-color: black;
border-radius: 7px;
}

.pushy-active #hamburger {
right: 325px;
z-index: 9999;
}

#hamburger:before, #hamburger:after, #hamburger span {
background: #e8e8e8;
content: '';
display: block;
width: 28px;
height: 3px;
position: absolute;
left: 20px;
border-radius: 4px;
}

#hamburger:before {
top: 10px;
}

#hamburger span {
top: 20px;
}

#hamburger:after {
top: 30px;
}

/* Hamburger animation */
#hamburger:before, #hamburger:after, #hamburger span {
-webkit-transition: none 0.2s ease 0.2s;
transition: none 0.2s ease 0.2s;
-webkit-transition-property: transform, top, bottom, left, opacity;
transition-property: transform, top, bottom, left, opacity;
}

.pushy-active #hamburger:before, .pushy-active #hamburger:after {
top: 20px;
}

.pushy-active #hamburger span {
opacity: 0;
}

.pushy-active #hamburger:before {
transform: rotate( 45deg );
}

.pushy-active #hamburger:after {
transform: rotate( -45deg );
}

.pushy {
width: 300px;
right: -400px;
}

.pushy-right {
-webkit-transform: translate3d(300px,0,0);
-moz-transform: translate3d(300px,0,0);
-ms-transform: translate3d(300px,0,0);
-o-transform: translate3d(300px,0,0);
transform: translate3d(300px,0,0);
right: 0;
}

.pushy-open {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.container-push, .push-push {
-webkit-transform: translate3d(-200px,0,0);
-moz-transform: translate3d-(-200px,0,0);
-ms-transform: translate3d(-200px,0,0);
-o-transform: translate3d(-200px,0,0);
transform: translate3d(-200px,0,0);
}

.pushy, #container, .push {
-webkit-transition: -webkit-transform 0.4s ease;
-moz-transition: -moz-transform 0.4s ease;
-ms-transition: -ms-transform 0.4s ease;
-o-transition: -o-transform 0.4s ease;
transition: transform 0.4s ease;
}

.social {
width: 135px;
margin: 0 auto;
margin-top: 25px;
}

.social a {
/* display: inline-block; */
/* float: left; */
padding: 5px;
border: none;
font-size: 35px;
}

.social a:hover {
background: none;
color: #fff;
}

.close-btn {
position: absolute;
right: 0;
top: 0;
display: none !important;
cursor: pointer;
}

/* Banner Section
------------------------------------------------------------------------- */
#home {
color: #fff;
text-align: center;
}

#home h2 {
font-size: 77px;
margin-bottom: 0;
padding-bottom: 0;
}

.slides .btn-primary {
margin-top: 20px;
}

.slides-pagination {
display: none;
}

.caption {
position: absolute;
left: 0;
top: 50%;
margin-top: -280px;
width: 100%;
color: #fff;
padding: 0 25px;
/*background-color: rgba(0, 0, 0, 0.5);
margin: auto;*/
}

#home p {
color: #fff;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 18px;
}

.video-overlay {
background: #000 url(../images/brilliant.png);
bottom: 0;
left: 0;
position: absolute;
right: 0;
opacity: 0.3;
top: 0;
}

#home .btn-primary {
margin-top: 0;
font-size: 18px;
white-space: normal;
background-color: turquoise;
color: black;
}

/* About Section
------------------------------------------------------------------------- */
#about {
background: #fafafa;
position: relative;
}

#about h3 {
font-family: GreatVibes-Regular;
border-bottom: #d4d4d4 1px solid;
padding-bottom: 15px;
margin-bottom: 30px;
font-weight: 500;
font-size: 54px;
/*text-transform: uppercase;*/
text-align: center;
}

.history {
padding-top: 50px;
padding-bottom: 50px;
min-height: 600px;
text-align: center;
}

.photo-container {
position: absolute;
height: 100%;
top: 0px;
left: 0;
}

.background-image-holder {
background: url(../images/victor-hugo-tarotista-de-fama-internacional.png) 50% 0% no-repeat;
/*width: 425px;*/
height: 70%;
z-index: 0;
background-size: cover !important;
margin-top: 100px;
}

.divider-background {
background-size: cover !important;
overflow: hidden;
}

/* Our Menu Section
------------------------------------------------------------------------- */
#our-menu h2 {
text-align: right;
display: block;
}

#our-menu {
background: #161615 url(../images/barbeque-bg.jpg) no-repeat;
padding: 50px 0;
color: #fff;
-webkit-background-size: cover;
background-size: cover;
}

#our-menu h3 {
font-size: 24px;
font-weight: 300;
text-transform: uppercase;
text-align: right;
}

#our-menu p {
color: #c7c7c7;
}

.menu-tabs {
border-bottom: 2px solid #DDD;
margin: 0 0 40px 0;
text-transform: uppercase;
font-weight: 500;
border-bottom: none;
text-align: center;
}

.menu-tabs > li.active > a, .menu-tabs > li.active > a:focus, .menu-tabs > li.active > a:hover {
border-width: 0;
}

.menu-tabs > li > a {
border: none;
color: #666;
}

.menu-tabs > li.active > a, .menu-tabs > li > a:hover {
border: none;
color: #fff !important;
background: transparent;
}

.menu-tabs > li > a::after {
content: "";
background: #fff;
height: 2px;
position: absolute;
width: 100%;
left: 0px;
bottom: -1px;
transition: all 250ms ease 0s;
transform: scale(0);
}

.menu-tabs > li.active > a::after, .menu-tabs > li:hover > a::after {
transform: scale(1);
}

.menu-tabs li, .menu-tabs li a {
display: inline-block;
}

.menu-tabs li {
float: none;
}

.menu-tabs>li.active>a, .menu-tabs>li.active>a:hover, .menu-tabs>li.active>a:focus {
background: none;
color: #fff;
}

.menu-tabs li a {
color: #D2D2D2;
border-radius: 0;
display: inline-block;
margin: 0 6px;
}

.menu-group-item {
margin-bottom: 20px;
}

.menu-item-price {
font-size: 20px;
font-weight: 600;
}

.menu-title {
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-weight: 500;
display: block;
margin: 5px 0;
}

.menu-descp {
color: #868686;
}

/* Gallery Section
------------------------------------------------------------------------- */
#gallery {
padding-top: 50px;
}

#gallery h2 {
text-align: center;
margin-bottom: 50px;
}

.sl-wrapper .sl-counter, .sl-wrapper .sl-close, .sl-wrapper .sl-navigation button {
color: #fff;
}

.sl-overlay {
background: #000;
}

.sl-spinner {
border-color: #e8e8e8;
}

figure.item {
background: #000;
}

figure.item img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.12);
transform: scale(1.12);
}

figure.item:hover img {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}

/* Blog Section
------------------------------------------------------------------------- */
#blog {
padding: 50px 0;
background: #fafafa;
color: #000000;
}

#blog h2 {
text-align: center;
margin-bottom: 50px;
}

.post {
margin-bottom: 40px;
}

.post h4 {
margin-bottom: 3px;
text-align: center;
}

.post a {
color: #fff;
}

.post p {
line-height: 23px;
text-align: center;
}

.post .date {
margin-bottom: 5px;
display: block;
}

.post .content {
margin-top: 20px;
}

/* Reservation Section
------------------------------------------------------------------------- */
.reservation {
text-align: center;
}

.reserve-header p {
/* color: #fff; */
}

#map {
width: 100%;
height: 500px;
}

.reservation-form {
margin: 20px 0;
}

.reservation-container {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
}

.reservation h2 {
display: inline-block;
margin: 0 auto;
text-align: center;
color: #0c0c0c;
}

.reserve-header {
/* background: url(../images/dinner-table.jpg) no-repeat; */
/* -webkit-background-size: cover; */
/* background-size: cover; */
position: relative;
padding: 50px 0;
text-align: center;
background: #f8f8f8;
}

.reserve-left-col p {
color: #D8D8D8;
}

.opening-hours {
background: #0C0C0C;
padding: 16px;
}

.opening-hours h2 {
font-size: 40px;
border-bottom: #fff 1px solid;
margin-bottom: 20px;
}

.opening-hours .frame {
border: #fff 2px solid;
margin-bottom: 0;
/*padding: 40px 25px;*/
}

.opening-hours ul p {
color: #fff;
margin-bottom: 0;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
}

.opening-hours ul li {
/*margin-bottom: 20px;*/
letter-spacing: 2px;
}

.opening-hours ul li:last-child {
margin-bottom: 0;
}

/* Reservation form
------------------------------------------------------------------------- */
.form-custom input[type="text"], .form-custom textarea {
padding: 10px;
border: 1px solid #e5e5e5;
transition: border 0.3s;
box-shadow: none;
height: 50px;
border-radius: 0;
background: #fcfcfc;
}

.form-custom textarea {
height: 150px;
}

.form-custom input[type="text"]:focus, .form-custom input[type="text"].focus, .form-custom textarea:focus, .form-custom textarea.focus {
background: #fdfdfd;
border: 1px solid #e2e2e2;
box-shadow: none;
}

.form-custom .input-group-addon {
background: #fdfdfd;
border: 1px solid #e2e2e2;
border-right: 0;
vertical-align: top;
padding: 12px;
}

.form-custom .form-group {
margin-bottom: 25px;
}

.form-custom .icon {
margin-top: 4px;
font-size: 16px;
display: inline-block;
color: #777;
}

.datepicker {
-webkit-box-shadow: none;
box-shadow: none;
display: block;
}

.datepicker td, .datepicker th {
border-radius: 0;
font-weight: normal;
padding: 5px 11px !important;
}

.datepicker table tr td.day:hover, .datepicker table tr td.day.focused {
background: #E0E0E0;
}

.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover {
background: #E0E0E0;
}

.datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active[disabled], .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active.disabled:hover[disabled] {
background: #D9534F;
color: #fff;
}


.whatsapp {
max-height: 40px;
display: inline-block;
vertical-align: middle;
}
a.whatsapptel.big {
font-size: 30px;
vertical-align: middle;
}
.whatsapptel {
padding: 5px 12px;
border-radius: 5px;
background-color: #189D0E;
color: white;
display: inline-block;
margin: 20px 0px;
}
.whatsapptel:hover, .whatsapptel:focus, .whatsapptel:active, .whatsapptel:visited {
text-decoration: none;
color: white;
}


/* Contact section
------------------------------------------------------------------------- */
#contact {
position: relative;
}

.contact-details {
width: 420px;
position: absolute;
top: 0;
background: #fff;
border: #C7C7C7 2px solid;
padding: 25px;
margin-top: 80px;
}

.contact-details h2 {
margin: 0;
}

.contact-details p {
line-height: 24px;
font-size: 15px;
margin-bottom: 20px;
}

.contact-phone, .contact-email {
margin-bottom: 10px;
}

.contact-details .icon {
margin-right: 5px;
margin-top: 3px;
font-size: 14px;
display: inline-block;
color: #777;
float: left;
}

/* Footer section
------------------------------------------------------------------------- */
footer {
background: #0C0C0C;
color: #fff;
padding: 18px;
text-align: center;
}

footer p {
margin-bottom: 0;
font-size: 14px;
}
footer .icon-facebook {
font-size: 20px;
color: #868686;
}
/* Media Queries
------------------------------------------------------------------------- */
@media screen and (max-width: 580) {
.pushy-active #hamburger {
right: 10px;
}
}

@media only screen and (max-width: 640px) {
#home h2 {
font-size: 46px;
}
}

@media only screen and (max-width: 768px) {
.contact-details {
position:static;
margin: 0 0 30px 0;
width: 100%;
}
}

@media only screen and (max-width: 990px) {
.history {
min-height: 100%;
background: rgba(255, 255, 255, 0.5);
padding-top: 10px;
}
}

@media only screen and (max-width: 349px) {
.close-btn {
display:block !important;
}
}

/* Buttons
------------------------------------------------------------------------- */
/* BUTTONS */
.btn-primary {
background: none;
padding: 14px;
color: #fff;
text-transform: uppercase;
font-weight: 500;
border: #000 2px solid;
-webkit-box-shadow: none;
box-shadow: none;
: -webkit-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
-moz-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
-o-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
/* linear */
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background: #fff;
border: #fff 2px solid;
color: #000;
}

.reservation-form .btn-primary {
background: #DE403C;
border: none;
}

.reservation-form .btn-primary:hover, .reservation-form .btn-primary:focus, .reservation-form .btn-primary:active {
color: #fff;
background: #D03834;
}

/* Helper Classes
------------------------------------------------------------------------- */
.p-l-n {
padding-left: 0 !important;
}

.f-n {
float: none;
}

/* carousel */
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 0px;
text-align: center;
min-height: 240px;
}

/* indicator position */
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}

/* indicator color */
#quote-carousel .carousel-indicators li {
background: rgba(255, 255, 255, 0.43);
border: none;
}

/* active indicator */
#quote-carousel .carousel-indicators .active {
background: #ffffff;
height: 10px;
width: 10px;
margin-bottom: 1px;
}

/* typography */
h1 {
text-align: center;
margin-bottom: -20px !important;
}

p {
/* font-style:italic; */
}

/* Testimonios Section
------------------------------------------------------------------------- */
#testimonios, #testimonios p {
/* text-align: center; */
color: white;
}

.testimonios-container {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: #0c0c0c;
min-height: 300px;
}

#testimonios h2, #testimonios h3 {
/* display: inline-block; */
margin: 0 auto;
text-align: center;
color: #fff;
}

.testimonios-header {
background: url(../images/testimonios-bg.jpg) no-repeat;
-webkit-background-size: cover;
background-size: cover;
padding: 50px 0;
/* text-align: center; */
}

.testimonios-left-col p {
color: #D8D8D8;
}

#testimonios .item p {
font-size: 21px;
line-height: 30px;
font-style: italic;
}

nav h2 {
color: white;
font-size: 40px;
}

.banderas img {
max-width: 31px;
margin: 4px;
}

#blog p {
text-align: center;
}

#blog h3 {
text-align: center;
}

.fondoescriba {
height: 120%;
max-height: 360px;
/* background: red; */
width: 100%;
position: absolute;
margin-top: -50px;
}

.fondoescriba img {
position: absolute;
height: 100%;
overflow: hidden;
right: 10%;
width: auto;
}

.tituloescriba {
margin-top: 50px;
}

@media screen and (max-width: 767px) {
.photo-container {
position: relative;
height: 390px;
top: 0px;
left: -20px;
margin-bottom: -240px;
}

.background-image-holder {
background: url(../images/clarividente.jpg) 50% 50% no-repeat;
width: 320px;
height: 340px;
z-index: -10;
background-size: cover !important;
top: 0%;
}

.tituloescriba {
background: rgba(255, 255, 255, 0.5);
padding: 20px;
margin-top: 110px;
}
}

.confirm {
padding: 5px;
margin-bottom: 10px;
}
.ok {
background: #4CAF50;
}

.error {
background: #de403c;
}

#play {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 100;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}

.whatsapp {
max-height: 30px;
display: inline-block;
vertical-align: bottom;
margin-right: 10px;
}

.validar {
color: #de403c;
font-weight: bold;
}

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

.col-lg-9 {
width: 100%;
}

#home .btn-primary {
font-size: 14px;
}
.caption {
top: 50%;
margin-top: -270px;
color: #fff;
padding: 0;
}

h3 {
padding-bottom: 0;
margin-bottom: 0;
font-size: 42px;
}

.whatsapptel {
margin: 10px 0px;
}

.photo-container {
margin-bottom: -390px;
}









}