/*
*	DESTINY - WEDDING HTML TEMPLATE
* 	Copyright 2016
* 	www.mutationmedia.net
* 	Created by : mutationthemes
*
*/
/* Table of Content
==================================================
	1.Preloader
	2.Site wrapper
	3.Hero section
	4.Restaurant section
	5.Menu section
	6.Special section
	7.Reservation section
	8.Gallery section
	9.Contact section
	10.Footer
	11.Mediaqueries





/*Preloader*/

/* Light (300) */
@font-face {
  font-family: 'Butler';
  src: url('../font/Butler-Light.woff2') format('woff2'),
       url('../font/Butler-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

/* Regular (400) */
@font-face {
  font-family: 'Butler';
  src: url('../font/Butler.woff2') format('woff2'),
       url('../font/Butler.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

/* Medium (500) */
@font-face {
  font-family: 'Butler';
  src: url('../font/Butler-Medium.woff2') format('woff2'),
       url('../font/Butler-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

/* Bold (700) */
@font-face {
  font-family: 'Butler';
  src: url('../font/Butler-Bold.woff2') format('woff2'),
       url('../font/Butler-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

/* ExtraBold (800) */
@font-face {
  font-family: 'Butler';
  src: url('../font/Butler-ExtraBold.woff2') format('woff2'),
       url('../font/Butler-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}

/* Black (900) */
@font-face {
  font-family: 'Butler';
  src: url('../font/Butler-Black.woff2') format('woff2'),
       url('../font/Butler-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

/* UltraLight (200) */
@font-face {
  font-family: 'Butler';
  src: url('../font/Butler-UltraLight.woff2') format('woff2'),
       url('../font/Butler-UltraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}

/* Fuente general para el sitio */
body {
  font-family: 'Butler', serif;
}

/* Hero title */
.hero h1 {
  font-family: 'Butler', serif;
  font-weight: 800; /* ExtraBold */
  font-size: 2rem;
  line-height: 1.2;
}

/* Hero subtitle */
.hero p.lead {
  font-family: 'Butler', serif;
  font-weight: 400; /* Light */
  font-size: 2rem;
  color: #ffffff;
}

/* fuerza el tamaño del H1 del hero, que lleva la clase .large */
.hero .inner-hero h1.large {
  font-family: 'Butler', serif;
  font-weight: 900;     /* ExtraBold */
  font-size: 5rem;      /* tu tamaño */
  line-height: 1.2;
  text-transform: none;
}


.loader {
    background: #ffffff;
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}
.loader-inner {
    left: 0;
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.loading-spinner {
    width: 100px;
    height: 100px;
    animation: spinner-rotate 2s ease-in-out infinite;
    -webkit-animation: spinner-rotate 2s ease-in-out infinite;
    -moz-animation: spinner-rotate 2s ease-in-out infinite;
    -ms-animation: spinner-rotate 2s ease-in-out infinite;
    -o-animation: spinner-rotate 2s ease-in-out infinite;
}
.spinner {
    animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
    -webkit-animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
    -moz-animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
    -ms-animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
    -o-animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
    stroke-linecap: round;
}
@keyframes spinner-rotate {
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: trotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}
@keyframes spinner-color {
    0%, 100% {
        stroke: #a68b7c;
    }
    20% {
        stroke: #353031;
    }
    40% {
        stroke: #a68b7c;
    }
    60% {
        stroke: #353031;
    }
    80% {
        stroke: #a68b7c;
    }
}
@keyframes spinner-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -125px;
    }
}
/*End preloader*/
/*Site wrapper*/

.wrapper {
    position: relative;
}
/*End site wrapper*/
/* Hero Section*/

section.hero {
    background: #353031;
    padding: 0;
    position: relative;
    overflow: hidden;
}
section.single-hero {
    min-height: 400px;
}
.background-img img {
    display: none;
}
.background-img {
    width: 100%;
    height: 100%;
}
.background-img {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #353031;
    background-image: none;
    background-origin: padding-box;
    background-position: 50% 50% !important;
    background-repeat: repeat;
    background-size: cover !important;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;c
}
.overlay:before {
    position: absolute;
    background: rgba(41, 41, 41, .5);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#353031+0,353031+100&0.5+0,0+100 */
    
    background: -moz-linear-gradient(top, rgba(41, 41, 41, .5) 60%, rgba(41, 41, 41, 0) 100%);
    /* FF3.6-15 */
    
    background: -webkit-linear-gradient(top, rgba(41, 41, 41, .5) 60%, rgba(41, 41, 41, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    
    background: linear-gradient(to bottom, rgba(41, 41, 41, .5) 60%, rgba(41, 41, 41, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#80353031', endColorstr='#00353031', GradientType=0);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    content: "";
}
section.hero .inner-hero {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 10;
}
.header {
    padding: 10px 0;
}
.slider .slides li {
    background-size: cover;
    min-height: 600px;
}
.header.default {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
}
.header.switched-header {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 0 20px rgba(41, 41, 41, .5);
    -webkit-box-shadow: 0 0 20px rgba(41, 41, 41, .15);
    -moz-box-shadow: 0 0 20px rgba(41, 41, 41, .15);
    -ms-box-shadow: 0 0 20px rgba(41, 41, 41, .15);
    -o-box-shadow: 0 0 20px rgba(41, 41, 41, .15);
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
.header .left-part {
    float: left;
    margin-left: 50px;
}
.header .logo {
    margin-top: 10px;
    display: block;
}
.header .logo h2 {
    color: #ffffff;
    font-size: 17px;
    
    font-weight: 700;
}
.header.switched-header .logo h2 {
    color: #353031;
}
.header .right-part {
    float: right;
    margin-right: 50px;
    position: relative;
}
.mobile-but {
    display: inline-block;
    height: 24px;
    position: absolute;
    right: -20px;
    top: -22px;
    z-index: 1000;
    display: none;
}
.mobile-but .lines {
    transform: translate(0px, 10px) rotate(0deg);
    -webkit-transform: translate(0px, 10px) rotate(0deg);
    -ms-transform: translate(0px, 10px) rotate(0deg);
    -moz-transform: translate(0px, 10px) rotate(0deg);
}
.mobile-but .lines,
.mobile-but .lines:after,
.mobile-but .lines:before {
    height: 2px;
    width: 28px;
}
.mobile-but .lines:after,
.mobile-but .lines:before {
    content: " ";
    display: block;
}
.mobile-but .lines:after {
    transform: translate(0px, 4px) rotate(0deg);
    -webkit-transform: translate(0px, 4px) rotate(0deg);
    -ms-transform: translate(0px, 4px) rotate(0deg);
    -moz-transform: translate(0px, 4px) rotate(0deg);
}
.mobile-but .lines:before {
    transform: translate(0px, -4px) rotate(0deg);
    -webkit-transform: translate(0px, -4px) rotate(0deg);
    -ms-transform: translate(0px, -4px) rotate(0deg);
    -moz-transform: translate(0px, -4px) rotate(0deg);
}
.mobile-but .lines:after,
.mobile-but .lines:before {
    background: #353031;
}
.toggle-mobile-but.active .mobile-but .lines:after {
    transform: translate(0px, -1px) rotate(45deg);
    -webkit-transform: translate(0px, -1px) rotate(45deg);
    -ms-transform: translate(0px, -1px) rotate(45deg);
    -moz-transform: translate(0px, -1px) rotate(45deg);
}
.toggle-mobile-but.active .mobile-but .lines:before {
    transform: translate(0px, 1px) rotate(-45deg);
    -webkit-transform: translate(0px, 1px) rotate(-45deg);
    -ms-transform: translate(0px, 1px) rotate(-45deg);
    -moz-transform: translate(0px, 1px) rotate(-45deg);
}
.main-nav li {
    display: block;
    float: left;
    text-transform: uppercase;
    margin-left: 25px;
    font-size: 11.5px;
    font-weight: 700;
}
.main-nav li a {
    color: #ffffff;
    display: block;
    padding: 12px 0;
    position: relative;
}
.header.switched-header .main-nav li a {
    color: #353031;
}
.hero-content {
    color: #ffffff;
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
h1.large {
    color: #ffffff;
    font-size: 120px;
    font-weight: 400;
    text-transform: none;
}
/* End hero section*/
/* Restaurant section*/

.vertical-align {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}
.block-img {
    display: block;
    height: 300px;
    position: relative;
}
.sing {
    max-width: 30%;
}
/* End restaurant section*/
/* Menu section*/

.block-tabs li {
    border-bottom: 1px solid #f2f2f2;
    cursor: pointer;
    display: inline-block;
    height: 40px;
    margin: 0 -2px;
    padding: 0 28px;
    position: relative;
    top: 1px;
    color: #353031;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
}
.block-tabs li.active {
    border-bottom: 2px solid #b0988b;
}
.block-tab li {
    display: none;
    padding-top: 30px;
}
.block-tab li.active {
    display: block;
}
.block-cat h2 {
    font-size: 60px;
    font-weight: 400;
    text-transform: none;
    color: #a68b7c;
}
.block-price {
    color: #a68b7c;
    font-weight: 700;
    display: block;
    font-size: 15px;
    margin-top: 10px;
}
/* End menu section*/
/* Review section*/

.block-review {
    background: rgba(54, 47, 45, 0.5) none repeat scroll 0 0;
    color: #ffffff;
    margin: 0 auto;
    padding: 50px 40px;
    width: 41.6667%;
}
.block-star li {
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
}
/* End review section*/
/* Special section*/

.block-content.special {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 50px 130px 50px 70px !important;
    color: #ffffff;
    overflow: visible;
}
.block-special {
    cursor: pointer;
    position: relative;
}
.block-special:hover,
.block-special.active {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    z-index: 40;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 0 10px rgba(166, 139, 124, 0.8);
    -webkit-box-shadow: 0 0 10px rgba(166, 139, 124, 0.8);
    -moz-box-shadow: 0 0 10px rgba(166, 139, 124, 0.8);
    -ms-box-shadow: 0 0 10px rgba(166, 139, 124, 0.8);
    -o-box-shadow: 0 0 10px rgba(166, 139, 124, 0.8);
}
.block-special:hover .block-content.special.sp-1:after,
.block-special.active .block-content.special.sp-1:after {
    background: rgba(166, 139, 124, 1);
}
.block-special:hover .block-content.special.sp-2:after,
.block-special.active .block-content.special.sp-2:after {
    background: rgba(176, 152, 139, 1);
}
.block-special:hover .block-content.special.sp-3:after,
.block-special.active .block-content.special.sp-3:after {
    background: rgba(187, 166, 154, 1);
}
.block-content.special.sp-1 {
    background: #a68b7c;
}
.block-content.special.sp-2 {
    background: #b0988b;
}
.block-content.special.sp-3 {
    background: #bba69a;
}
.block-content.special.sp-1,
.block-content.special.sp-3 {
    top: 0;
}
.block-content.special.sp-2 {
    bottom: 0;
}
.block-content.special:after {
    content: "";
    width: 100%;
    padding: 8px 0;
    position: absolute;
    left: 0;
}
.block-content.special.sp-1:after {
    background: rgba(166, 139, 124, .85);
    bottom: -15px;
}
.block-content.special.sp-2:after {
    background: rgba(176, 152, 139, .85);
    top: -15px;
}
.block-content.special.sp-3:after {
    background: rgba(187, 166, 154, .85);
    bottom: -15px;
}
.block-price.special {
    color: #ffffff;
    position: absolute;
    right: 50px;
    top: 40px;
}
.block-img.special {
    height: 415px;
}
.special.sp-1 h2 {
    color: #c5b3aa;
}
.special.sp-2 h2 {
    color: #c9c1b9;
}
.special.sp-3 h2 {
    color: #d7d2cb;
}
/* End special section*/
/* Reservation section*/

.block-form {
    background: #ffffff;
    padding: 60px;
    border: 1px solid #ececec;
}
.block-input {
    margin-bottom: 30px;
}
.block-input label {
    margin-bottom: 15px;
    color: #555555;
}
form,
.select-input {
    position: relative;
}
.input-columns .column-1,
.input-columns .column-2 {
    float: left;
    width: 50%;
    position: relative;
}
.input-columns .column-1 .column-inner {
    margin: 0 12px 0 0;
}
input[type] {
    background: #fcfcfc;
    border: 1px solid #ececec;
    outline: 0 none;
    overflow: hidden;
    padding: 0 15px;
    resize: none;
    width: 100%;
    height: 40px;
}
input[type]:focus {
    border: 1px solid #a68b7c;
}
.ico-input {
    position: relative;
}
.ico-input i {
    color: #b3b3b3;
    font-size: 18px;
    position: absolute;
    right: 10px;
    top: 40px;
}
.submit {
    background: #a68b7c;
    cursor: pointer;
    position: relative;
    width: 100%;
    color: #ffffff;
    border: none;
    height: 42px;
    line-height: 0;
}

input.error {
    border: 1px solid #353031 !important;
}


.success-msg,
.error-msg {
    display: none;
    position: relative;
}
.success-msg h2,
.error-msg h2 {
    font-size: 11px;
    right: 0;
    position: absolute;
    text-transform: none;
    top: -50px;
}
.success-msg h2 {
    color: #4e93e6;
}
.error-msg h2,
.success-msg h2 {
    color: #61279e;
}


/*End reservation section*/
/* Contact section*/

.block-map {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.map {
    width: 100%;
    height: 100%;
}
.block-social li {
    display: inline-block;
    margin-right: 2px;
    text-align: center;
}
.block-social a {
    border: 2px solid #a68b7c;
    color: #a68b7c;
    display: inline-block;
    height: 42px;
    width: 42px;
    border-radius: 50%;
    -webkit-border-radius: : 50%;
    -moz-border-radius: : 50%;
    -ms-border-radius: : 50%;
    -o-border-radius: : 50%;
    line-height: 40px;
}
.block-social a:hover {
    border: 2px solid #b79e90;
    color: #b79e90;
	border: 2px solid rgba(183,158,144,.95);
    color: rgba(183,158,144,.95);
}
.block-info p {
    font-size: 16px;
}
.block-info p strong {
    color: #555555;
    text-transform: capitalize;
}
/* End contact section*/
/* Footer*/

.footer-short p {
    color: #cccccc;
    font-size: 12px;
}
/* End footer*/
/*Media queries*/

@media screen and (min-width: 600px) and (max-width: 800px) {
    input,
    textarea {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }
    h1.large {
        font-size: 110px;
    }
    .header .left-part,
    .header .right-part {
        float: none;
        display: block;
    }
    .header .left-part {
        margin-left: 30px;
    }
    .header {
        background-color: rgba(255, 255, 255, 0.98) !important;
        padding: 15px 0;
    }
    .header .logo {
        margin-top: 0;
    }
    .header .logo h2 {
        color: #353031;
    }
    .mobile-but {
        display: block;
    }
    .main-nav ul {
        display: none;
        margin-left: 30px;
    }
    .main-nav li {
        float: none;
        display: block;
        margin-left: 0;
        font-size: 11px;
    }
    .main-nav li a {
        color: #353031;
        display: inline-block;
    }
    .sing {
        max-width: 40%;
    }
    .contact {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }
}
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
    input,
    textarea {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }
    .sing {
        max-width: 40%;
    }
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) {
    input,
    textarea {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }
    .main-nav li {
        font-size: 11px;
    }
    .contact {
        padding-top: 150px !important;
        padding-bottom: 150px !important;
    }
    .vertical-align {
        display: flex !important;
    }
    .sing {
        max-width: 30%;
    }

}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) {
    input,
    textarea {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }
    .title-medium {
        font-size: 17px;
    }
    .block-content.special {
        padding: 50px 100px 50px 50px !important;
    }
    .main-nav li {
        font-size: 11px;
    }
    .contact {
        padding-top: 150px !important;
        padding-bottom: 150px !important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    input,
    textarea {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }
    .title-medium {
        font-size: 17px;
    }
    .main-nav li {
        font-size: 11px;
    }
    .contact {
        padding-top: 150px !important;
        padding-bottom: 150px !important;
    }
    .block-content.special {
        padding: 50px 100px 50px 50px !important;
    }
}
@media only screen and (max-width: 768px) and (orientation: portrait) {
    input,
    textarea {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }
    h1.large {
        font-size: 110px;
    }
    .header .left-part,
    .header .right-part {
        float: none;
        display: block;
    }
    .header .left-part {
        margin-left: 30px;
    }
    .header {
        padding: 15px 0;
    }
    .header .logo {
        margin-top: 0;
    }
    .header .logo h2 {
        color: #353031;
    }
    .mobile-but {
        display: block;
    }
    .main-nav ul {
        display: none;
        margin-left: 30px;
    }
    .main-nav li {
        float: none;
        display: block;
        margin-left: 0;
        font-size: 11px;
    }
    .main-nav li a {
        color: #353031;
        display: inline-block;
    }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
    input,
    textarea {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }
    .header .left-part,
    .header .right-part {
        float: none;
        display: block;
    }
    .header .left-part {
        margin-left: 30px;
    }
    .header {
        background-color: rgba(255, 255, 255, 0.98) !important;
        padding: 15px 0;
    }
    .header .logo {
        margin-top: 0;
    }
    .header .logo h2 {
        color: #353031;
    }
    h1.large {
        font-size: 75px;
    }
    p.lead {
        font-size: 11px;
    }
    .title-medium {
        font-size: 17px;
    }
    p.title-lead {
        font-size: 15px;
    }
    .mobile-but {
        display: block;
    }
    .main-nav ul {
        display: none;
        margin-left: 30px;
    }
    .main-nav li {
        float: none;
        display: block;
        margin-left: 0;
        font-size: 11px;
    }
    .main-nav li a {
        color: #353031;
        display: inline-block;
    }
    .but {
        font-size: 10px;
        padding: 13px 20px;
    }
    .vertical-align {
        display: block !important;
    }
    .row.vertical-align:last-child .block-img {
        margin-bottom: 30px;
    }
    .block-price.special {
        right: 70px;
    }
    .review-slider .flex-control-nav,
    .review-slider .flex-direction-nav a {
        display: none;
    }
    .block-review {
        width: auto;
    }
    .block-tabs li {
        padding: 0 15px;
    }
    .contact {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }
    .block-map {
        display: none;
    }
    .block-form {
        padding: 40px;
    }
    .input-columns .column-1,
    .input-columns .column-2 {
        float: none;
        width: 100%;
    }
    .input-columns .column-1 .column-inner {
        margin: 0;
    }
    .input-columns .column-1 {
        margin-bottom: 30px;
    }
    .sing {
        max-width: 30%;
    }
}

@media only screen and (max-width: 479px) {
    input,
    textarea {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }
    .header .left-part,
    .header .right-part {
        float: none;
        display: block;
    }
    .header .left-part {
        margin-left: 30px;
    }
    .header {
        background-color: rgba(255, 255, 255, 0.98) !important;
        padding: 15px 0;
    }
    .header .logo {
        margin-top: 0;
    }
    .header .logo h2 {
        color: #353031;
    }
    h1.large {
        font-size: 50px;
    }
    p.lead {
        font-size: 11px;
    }
    .mobile-but {
        display: block;
    }
    .main-nav ul {
        display: none;
        margin-left: 30px;
    }
    .main-nav li {
        float: none;
        display: block;
        margin-left: 0;
        font-size: 11px;
    }
    .main-nav li a {
        color: #353031;
        display: inline-block;
    }
    .but {
        font-size: 10px;
        padding: 13px 20px;
    }
    .vertical-align {
        display: block !important;
    }
    .row.vertical-align:last-child .block-img {
        margin-bottom: 30px;
    }
    .sing {
        max-width: 40%;
    }
    .flex-control-nav,
    .flex-direction-nav a {
        display: none;
    }
    .block-content.special {
        padding:50px 100px 50px 40px !important;
    }
    .block-review {
        width: auto;
    }
    .block-tabs li {
        padding: 0 6px;
    }
    .contact {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }
    .block-map {
        display: none;
    }
    .block-form {
        padding: 40px;
    }
    .input-columns .column-1,
    .input-columns .column-2 {
        float: none;
        width: 100%;
    }
    .input-columns .column-1 .column-inner {
        margin: 0;
    }
    .input-columns .column-1 {
        margin-bottom: 30px;
    }

}

/* =========================
   HEADER + MENÚ (versión limpia)
   ========================= */

/* Variables de layout del header */
:root{
  --header-edge: 50px;      /* margen izq/dcha del header */
  --header-height: 88px;    /* alto del header en móvil  */
}

/* Asegura que el header quede por encima del overlay/hero */
.header.default{ z-index: 3000; }

/* Contenedores izquierda/derecha sin márgenes raros */
.header .left-part,
.header .right-part{
  margin:0;
  padding: 5px;
  position:relative;
}

/* Tamaño de logos (el HTML ya tiene .logo-desktop y .logo-mobile) */
.header .left-part .logo img{
  height:46px;
  width:auto;
  display:block;
}

/* Menú horizontal (desktop) */
.header .right-part{
  display:flex;
  flex:1;
  justify-content:flex-end;
  align-items:center;
}
.header .right-part .main-nav > ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:28px;
}
.header .right-part .main-nav > ul > li > a{
  display:block;
  text-decoration:none;
  padding:8px 0;
}

/* Botón CTA genérico */
a.but{
  font-family:'Butler', serif;
  background:#FAF7F3;
  color:#000;
  border-radius:6px;
  padding:15px 18px;
  font-weight:700;
  font-size:1.3rem;
  transition:background .3s ease;
  text-transform:none;
  letter-spacing:normal;
}
a.but:hover{ background:#FDDD7F; color:#000; }

/* ======== Desktop ======== */
@media (min-width: 993px){
  /* Logo blanco visible en desktop */
  .header .left-part .logo img.logo-desktop{ display:inline-block !important; }
  .header .left-part .logo img.logo-mobile{  display:none !important; }

  /* Enlaces del menú en blanco sobre hero */
  .main-nav ul{ display:flex !important; }
  .main-nav li{ display:inline-block; margin:0 14px; list-style:none; }
  .main-nav a{ color:#fff; text-transform:uppercase; padding:0; }

  .header.default{ background:transparent; }
}

/* ======== Móvil ======== */
@media (max-width: 992px){
  /* Header blanco en móvil */
  .header.default{
    background:#fff;
    padding: 10px 0;
  }

  /* Logo negro visible en móvil */
  .header .left-part .logo img.logo-desktop{ display:none !important; }
  .header .left-part .logo img.logo-mobile{  display:inline-block !important; }

  /* Oculta SIEMPRE el menú horizontal del header en móvil */
  .header .right-part .main-nav > ul{ display:none !important; }

  /* Botón hamburguesa visible y clicable */
  .toggle-mobile-but{
    display:block;
    position:absolute;
    right: var(--header-edge, 24px);
    top:50%;
    transform: translateY(-50%);
    z-index:5001;           /* por encima del panel */
  }
  .mobile-but{ width:36px; height:36px; position:relative; display:block; }
  .mobile-but .lines,
  .mobile-but .lines:before,
  .mobile-but .lines:after{
    position:absolute; left:4px; width:28px; height:2px; background:#111; content:"";
  }
  .mobile-but .lines{ top:50%; transform:translateY(-50%); }
  .mobile-but .lines:before{ top:-6px; }
  .mobile-but .lines:after{  top: 6px; }

  /* Animación a "X" (aprovecha las reglas del tema) */
  .toggle-mobile-but.active .mobile-but .lines:after{
    transform: translate(0px, -1px) rotate(45deg);
  }
  .toggle-mobile-but.active .mobile-but .lines:before{
    transform: translate(0px, 1px) rotate(-45deg);
  }

  /* Panel del menú móvil: ancho completo BAJO el header */
  .main-nav{ position:relative; }

  #main-menu{
    display:none;                     /* se muestra con .is-open */
    position:fixed;
    left:0; right:0;
    top: var(--header-height, 88px);  /* justo debajo del header */
    background:#fff;
    padding:14px var(--header-edge, 24px) 18px;
    box-shadow:0 10px 24px rgba(0,0,0,.15);
    z-index:4000;
  }
  /* Al abrir el menú */
  .main-nav.is-open #main-menu{ display:block !important; }

  /* Items en columna, alineados a la izquierda */
  #main-menu li{
    display:block;
    margin:10px 0;
    list-style:none;
    text-align:left;
  }
  #main-menu a{
    display:block;
    color:#111;
    text-decoration:none;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
    padding:8px 0;
  }
}

/* Bloquea el scroll del body cuando el panel está abierto */
body.lock-scroll{ overflow:hidden; }


/* ===== Ajustes de márgenes y alineación del header ===== */
:root{
  --header-edge: 30px;           /* margen izq/dcha en DESKTOP (cámbialo) */
  --header-edge-mobile: 22px;    /* margen izq/dcha en MÓVIL */
  --header-height-desktop: 50px; /* alto visual del header en desktop */
  --header-gap: 28px;            /* espacio entre ítems de menú en desktop */
}

/* Desktop */
@media (min-width: 993px){
  /* padding lateral = márgenes del header */
  .header.default{
    padding: 18px var(--header-edge) !important;
    height: var(--header-height-desktop);
    background: transparent;
  }


  /* alinea verticalmente los enlaces con el logo */
  .header .right-part{ display:flex; align-items:center; }
  .header .right-part .main-nav > ul{
    display:flex !important;
    gap: var(--header-gap);
    align-items: center;                 /* centra los li en el eje vertical */
    margin:0; padding:0;
  }
  .header .right-part .main-nav > ul > li > a{
    display:flex; align-items:center;    /* centra texto del enlace */
    line-height: 1;
    padding: 20px;                          /* sin padding extra vertical */
  }
}

/* Móvil: que respete bordes y quede justo bajo el header */
@media (max-width: 992px){
  .header.default{
    padding: 10px var(--header-edge-mobile) !important;
  }

  /* panel del menú */
  #main-menu{
    top: var(--header-height, 80px);
    padding-left:  var(--header-edge-mobile);
    padding-right: var(--header-edge-mobile);
  }
}

.short-reservation h1.large{
  font-family: 'Butler', serif;
  font-weight: 900;     /* ExtraBold como el hero */
  font-size: 5rem;      /* igual que el hero */
  line-height: 1.2;
  text-transform: none;
  color: #fff;          /* la sección lleva overlay oscuro */
}

.etiqueta {
   display: inline-block;
   background-color: black;
   color: white;
   padding: 5px 10px;
   font-size: 11px;
   font-weight: bold;
   border-radius: 3px;
   text-transform: uppercase;
   margin-bottom: 10px;
}

.extra-info {
   font-size: 12px;
   color: #e67e22; /* naranja llamativo */
   margin-top: 5px;
   font-weight: 600;
}

/* ===== Nuevo estilo lista de platos (tipo Foxeresto) ===== */
.menu-list {
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.menu-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px dotted rgba(0,0,0,.08);
}

.menu-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
}

.menu-dots {
  flex: 1;
  border-bottom: 1px dotted rgba(0,0,0,.35);
  transform: translateY(-4px); /* sube la línea para alinearla al título */
}

.menu-price {
  font-weight: 700;
  color: #a68b7c;              /* tu beige corporativo */
  white-space: nowrap;
  margin-left: 6px;
}

.menu-desc {
  display: block;
  font-size: 14px;
  color: #777;
  margin-top: 6px;
}

/* Opcional: separador sutil entre bloques de categorías */
.menu-group {
  margin: 28px auto 0;
}
.menu-group-title {
  font-size: 24px;
  color: #a68b7c;
  font-weight: 400;
  text-transform: none;
  margin: 12px auto 8px;
  text-align: center;
}

/* ===== Estilo lista de platos (y reseteos para que no se oculte nada) ===== */
#menu .menu-list { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  max-height: none; 
  overflow: visible; 
}

#menu .menu-list > li { 
  display: block !important;  /* evita que el tema oculte los <li> extra */
}

.menu-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px dotted rgba(0,0,0,.08);
}

.menu-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
}

.menu-dots {
  flex: 1;
  border-bottom: 1px dotted rgba(0,0,0,.35);
  transform: translateY(-4px);
}

.menu-price {
  font-weight: 700;
  color: #a68b7c; /* tu beige corporativo */
  white-space: nowrap;
  margin-left: 6px;
}

.menu-desc {
  display: block;
  font-size: 14px;
  color: #777;
  margin-top: 6px;
}

.menu-group { margin: 28px auto 0; }
.menu-group-title {
  font-size: 24px;
  color: #a68b7c;
  font-weight: 400;
  margin: 12px auto 8px;
  text-align: center;
}

/* (Opcional) dos columnas en escritorio */
@media (min-width: 992px){
  .menu-list{ 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    column-gap: 40px; 
  }
}

/* ---- Carta centrada y columnas iguales ---- */
#menu .menu-group{
  max-width: 980px;      /* bloque más recogido y centrado */
  margin: 0 auto;
  padding: 0 12px;
}

#menu .menu-list{
  display: grid;
  grid-template-columns: repeat(2, 420px);  /* dos columnas con ancho idéntico */
  justify-content: center;                  /* centra el conjunto de columnas */
  column-gap: 100px;                         /* separación entre columnas */
  row-gap: 26px;                            /* separación vertical entre platos */
  text-align: left;
}

/* Línea punteada y espaciado de cada plato */
#menu .menu-item{
  padding: 14px 0 18px;
  border-bottom: 1px dotted rgba(0,0,0,.08);
}

/* Responsive: 1 columna en pantallas medianas y pequeñas */
@media (max-width: 1500px){
  #menu .menu-group{ max-width: 640px; }
  #menu .menu-list{
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

/* 1) Centrar el contenedor de las pestañas (el UL dentro de la .row) */
#menu .row > .block-tab{
  display: block;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;   /* compensa los -15px de .row */
  padding-right: 20px;  /* compensa los -15px de .row */
}

/* 2) Centrar el bloque de cada pestaña */
#menu .menu-group{
  max-width: 980px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 12px;
}

/* 3) Dos columnas iguales y bloque centrado */
#menu .menu-list{
  display: grid;
  grid-template-columns: repeat(2, 420px); /* mismo ancho en ambas columnas */
  column-gap: 88px;    /* separación entre columnas */
  row-gap: 26px;       /* separación vertical entre platos */
  width: max-content;  /* el grid ocupa sólo lo que mide */
  margin-left: auto;   /* centra el grid */
  margin-right: auto;  /* centra el grid */
  text-align: left;
}

/* 4) Responsive: 1 columna centrada en pantallas más pequeñas */
@media (max-width: 1024px){
  #menu .menu-list{
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 640px;
  }
}

/* Precio más vistoso */
.menu-price {
  font-size: 20px;
  font-weight: 700;
  color: #b85c38;  /* tono cálido llamativo, cámbialo si quieres */
  margin-left: 10px;
}

/* Etiqueta Top Ventas */
.badge-top {
  display: inline-block;
  background: #000;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 3px 8px;
  margin-left: 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Nota especial (como el +1€ de patatas grandes) */
.note {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #d35400; /* naranja llamativo */
  margin-top: 4px;
}

/* ===== Header sticky: fondo blanco, texto negro, logo oscuro ===== */
.header.switched-header{
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* enlaces en negro al hacer scroll */
.header.switched-header .main-nav li a{ 
  color:#000 !important; 
}

/* hamburguesa en negro (móvil) */
.header.switched-header .mobile-but .lines,
.header.switched-header .mobile-but .lines:before,
.header.switched-header .mobile-but .lines:after{
  background:#000 !important;
}

/* --- CAMBIO DE LOGO --- */
/* En desktop: cuando el header es blanco, ocultamos el logo blanco y mostramos el oscuro */
@media (min-width: 993px){
  .header.switched-header .logo img.logo-desktop{ display:none !important; }   /* blanco */
  .header.switched-header .logo img.logo-mobile{  display:inline-block !important; } /* oscuro */
}

/* Conserva los márgenes/tamaño del logo */
.header .left-part{ margin-left:50px; }   /* ya lo tenías así */
.header .logo img{ height:46px; width:auto; display:block; }

/*End media queries*/