/* Clases globales ---------------------------------------- */

.cf:before, .cf:after {content:""; display:table;} .cf:after {clear:both;} .cf {zoom:1;}
.fl {float: left;} .fr {float: right;} .clear {clear: both;}
.textl {text-align: left;} .textr {text-align: right;} .textc {text-align: center;} .textj {text-align: justify;}
.bold {font-weight: bold;} .mayus {text-transform: uppercase;} .italic {font-style: italic;}
.box {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.mt-5 {margin-top: 5px;} .ml-5 {margin-left: 5px;} .mb-5 {margin-bottom: 5px;} .mr-5 {margin-right: 5px;}
.mt-10 {margin-top: 10px;} .ml-10 {margin-left: 10px;} .mb-10 {margin-bottom: 10px;} .mr-10 {margin-right: 10px;}
.mt-20 {margin-top: 20px;} .ml-20 {margin-left: 20px;} .mb-20 {margin-bottom: 20px;} .mr-20 {margin-right: 20px;}
.mt-40 {margin-top: 40px;} .ml-40 {margin-left: 40px;} .mb-40 {margin-bottom: 40px;} .mr-40 {margin-right: 40px;}
.pad-10 {padding: 10px;} .pad-20 {padding: 20px;}
.radius5 {border-radius:5px; -moz-border-radius:5px; -ms-border-radius: 5px; -webkit-border-radius:5px; -khtml-border-radius:5px;}
.radius10 {border-radius:10px; -moz-border-radius:10px; -ms-border-radius: 10px; -webkit-border-radius:10px; -khtml-border-radius:10px;}
.radius20 {border-radius:20px; -moz-border-radius:20px; -ms-border-radius: 20px; -webkit-border-radius:20px; -khtml-border-radius:20px;}
.radius5b {border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; -ms-border-radius: 0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; -khtml-border-radius:0 0 5px 5px;}
.radiusCir {border-radius:50%; -moz-border-radius:50%; -ms-border-radius: 50%; -webkit-border-radius:50%; -khtml-border-radius:5px;}
.sombra1 {box-shadow: 0 0 10px rgba(0, 0, 0, 0.50); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.50); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.50);}
.flex1 {-webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1;}
.block-wrap {width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
.block-column {-webkit-flex-direction:column; -moz-flex-direction:column;  -o-flex-direction:column; -ms-flex-direction:column; flex-direction: column;}
.cw {color:#fff} .cb {color:#000}
.bw {background-color:#fff;} .bb {background-color: #000;}
.fs0 {font-size: 0.8em;} .fs1 {font-size: 1.2em;} .fs2 {font-size: 1.5em;} .fs3 {font-size: 2em;} .fs4 {font-size: 3em;}
.cover {-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.block {display: block;} .hidden {display: none;}
.onlyPC {display: block;} .onlyMobile {display: none;}
.col1 {width: 8.333333333333333%;} .col2 {width: 16.66666666666667%;} .col3 {width: 25%;} .col4 {width: 33.33333333333333%;} .col5 {width: 41.66666666666667%;} .col6 {width: 50%;} .col7 {width: 58.33333333333333%;} .col8 {width: 66.66666666666667%;} .col9 {width: 75%;} .col10 {width: 83.33333333333333%;}.col11 {width: 91.66666666666667%;} .col12 {width: 100%;}
.padt-10 {padding-top: 10px;} .padl-10 {padding-left: 10px;} .padb-10 {padding-bottom: 10px;} .padr-10 {padding-right: 10px;}
.padt-20 {padding-top: 20px;} .padl-20 {padding-left: 20px;} .padb-20 {padding-bottom: 20px;} .padr-20 {padding-right: 20px;}
.padr-20 {padding-right: 20px;} .padl-20 {padding-left: 20px;}

/* Configuraciones iniciales para el proyecto ---------------------------------------- */

html {height: 101%;}
body {height: 100%; font:0.9em Arial, sans-serif; color:#666; background: #280D03;}

hr {border: none; border-top: 1px solid #E5E6E7;}
a:link, a:visited {color:#666; text-decoration: none;}
a:hover {}
p {color:#666; line-height: 1.4em;}
p a {color:#f68426 !important;}
p a:hover {color:#7f7016 !important;}

table {width: 100%; border-collapse: collapse;}
tfoot td, th {background: #f2f2f2 !important; color:#999;}
th {height: 40px;}
tr {border-bottom: 1px solid #E5E6E7;}
td, th {vertical-align: middle; padding: 5px 0;}
tbody tr:hover {border-color: #C0111E;}
tbody img {display: block;}

form {text-align: left;}
form fieldset.one .row {width: 100%;}
form fieldset.two .row {width: 49.5%;}
form fieldset.two .row:last-child {margin-left: 1%;}
form fieldset.three .row {width: 32.66666666666667%; margin-right: 1%;}
form fieldset.three .row:last-child {margin-right: 0;}
form fieldset legend {border-bottom: 1px dotted #ccc; width: 100%;}
form .row {display: block;}
form label {font-weight: bold; color:#666}
input, select, textarea {border: 1px solid #ccc; padding: 10px; background: #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
form input[type="text"], form input[type="password"] {width: 100%;}
form select {width: 100%; display: block;}
form textarea {width: 100%; min-height: 80px; color:#666}
form .tip {color:#999; display: block; margin-top: 5px;}
form .errorMessage {background: #f7e0e2; color:#C0111E; padding: 5px;}
form .check label {font-weight: normal;}
form .row .title {font-weight: bold; display: block; margin-bottom: 5px;}
form input.error {border: 1px dashed red;}

.c1 {color:#211E20} /* Cafe oscuro */
.c2 {color:#E5E6E7} /* Gris oscuro */
.c3 {color:#f2f2f2} /* Gris claro */

.bg1 {background-color: #C0111E;}
.bg2 {background-color: #E5E6E7;}
.bg3 {background-color: #f2f2f2;}

/* Clases globales de este proyecto ---------------------------- */

.btn {background: #d3bd6f; padding: 3px 20px; text-align: center; border: 1px solid #d3bd6f; color:#d3bd6f;}
.btn:hover {background-color: #d3bd6f; color:#fff; text-decoration: none;}

.center {background: #D8C675 url("../img/bg/texture.png"); position: relative;}
.center .shadow {height: 10px; width: 100%; position: absolute; background: url("../img/bg/shadow_top.png"); display: block; top: 0; z-index: 500;}
.wrap {width: 100%; max-width: 1280px; padding: 0 20px; margin: 0 auto;}
.font1 {font-family: 'Oleo Script', cursive;}
.banner {width: 100%; max-width: 1280px; margin: 0 auto;}

/* Page, Header, Nav, Center, Footer ---------------------------- */

#page {width: 100%;}
#header {width: 100%; height: 300px; background: url("../img/bg/header.jpg") repeat-x; position: relative;}
#header .texture {width: 100%; height: 300px; max-width: 1280px; margin: 0 auto; background: url("../img/bg/header_texture.png") no-repeat;}
#header .logo {width: 200px; margin: 30px auto 0 auto}
#header .intro {margin-top: 10px}
#header .intro h1 {color: #FFFFFF; font-size: 1.4em; font-weight: bold}
#header .intro h2 {color: #FFFFFF; font-size: 1.2em;}

#nav {position: absolute; bottom: 0; left: 50%; margin-left: -421px;}
#nav li {display: inline-block;}
#nav li a {color:#211E20; width: 165px; line-height: 40px; background: url("../img/bg/btn.png"); display: block;}
#nav li a:hover,
#nav li .active {background-position: 0 40px; color:#392113}
#nav .reservas {background: url("../img/bg/btn2.png");}
#nav .facebook {background: url("../img/bg/btn2.png");}

#footer .info {padding: 20px 0; color:#FFFFFF;}

/* Secciones ---------------------------- */

/* Menu */
#menu {background: #FFFFFF;}
#menu .menu {max-width: 600px; margin: 0 auto; padding: 40px 20px;}
#menu .menu li {margin-bottom: 20px;}
#menu .menu li .fl {width: 80%;}
#menu .menu li .fl span:last-child {color:#211E20}
#menu .menu li:hover {background: #F4F4F4;}
#menu .menu .twoCol .fl {width: 60%}

/* Restaurantes */
#mc_map {width:100%; max-width: 1280px; height:560px; margin: 0 auto;}
#mc_map img {max-width: none;}
#restaurants {background: #FFFFFF;}
#restaurants ul {padding-bottom: 20px;}
#restaurants .info {margin-top: 180px;}

/* Eventos */
#reservas {background: #FFFFFF;}
#reservas .info {padding: 40px; max-width: 500px; margin: 0 auto;}
#reservas .warning {background: red; color:#fff;}

#confirmation {width: 100%; height: 30vh; display: flex; justify-content: center; align-items: center;}
#confirmation p {font-size: 1.5rem}