@charset "UTF-8";
/* CSS Document */
/*
	$mexyellow:#EFB447;
	$mexlightyellow: #fad97a
	$mexred:#A43136;
	$mexdarkwoodred: :#4b2929
	$mexgreen:#2B4F37;
	$mexblue:#4672A0;
	$mexblue2:#4F99C6;
	$mexlavishlavender: #9975a5
    $logoyellow: #fadfbf;
$logogreen: #315F5f;
rgb 137, 202, 198
rgb 255, 255, 217
color palette:
dark: rgb(60,24,24) #3C1818;
yellow: rgb(254,234,163) #FEEAA3;
green: rgb(78.183,178) #4EB7B2;
*/
body {
  margin: auto;
  padding: 0px;
  /*background-color: #0b2929;
  background-color: #fadfbf;*/
  background-color: rgb(254, 234, 163);
  /* The image used */
  /*background-image:url("images/20220403-DSC08452.jpg");
    background-image: url("images/20210717-DSC07994.jpg");
	background-image:url("images/20220507-KXIY1053.jpg");*/
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #3c1818;
  text-align: center;
  font-family: Copperplate;
  font-size: 0.9em;
}
* {
  box-sizing: border-box;
  word-break: break-word;
}
.inputTable {
  background-color: #FFFFFF;
}
a:any-link {
  color: rgb(254, 234, 163);
}
.row::after, .mainRow::after {
  content: "";
  clear: both;
  display: table;
}
[class*="col-"] {
  /*float: left;*/
  padding: 0px;
  display: inline-block;
  vertical-align: top;
}
html {
  font-family: Copperplate;
  font-size: 1.4em;
}
.header {
  /*background-color: #4672A0;
    background-color: #A43136;*/
  /*color: #4b2929;*/
  padding: 0px 5px;
  /*border-bottom: solid #FFFFFF 1px;
  overflow: hidden;
  font-family: Trattatello;
  font-family: 'Slackey', cursive;
  font-size: 1em;
  text-align: center;*/
  overflow: hidden;
}
#logoPlaceholder {
  /*background-image: url("images/donmexcalitologo.JPG");*/
  /* Center and scale the image nicely */
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
}
.topnav {
  overflow: visible;
  /* background-color: transparent; */
  position: absolute;
  opacity: .9;
  right: 0px;
}
.topnav a {
  padding: 14px 16px;
  display: block;
}
.topnav #myLinks {
  display: none;
}
#consent {
  background-color: #fff;
}
.button {
  background: #000;
  -webkit-border-radius: 7;
  -moz-border-radius: 7;
  border-radius: 7px;
  text-decoration: none;
  cursor: pointer;
  margin: 0px 1px 0px 0px;
  vertical-align: top;
}
.menu {
  /*background-color: rgb(78, 183, 178);*/
  color: rgb(254, 234, 163);
  text-align: center;
}
.menu ul {
  list-style-type: none;
  margin: 0px auto;
  padding: 0;
  display: table;
}
.menu li {
  float: left;
  padding: 8px;
  margin-bottom: 7px;
  /*background-color: #315F5f;
  color: #ffffff;*/
  background-color: rgb(78, 183, 178);
  color: rgb(254, 234, 163);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-right: 1px solid white;
  font-size: 1.1em;
}
.menu li:hover, .menu li .chosen {
  background-color: #9975a5;
  cursor: pointer;
}
.menu select {
  background-color: rgb(60, 24, 24);
}
.toggle > .col-12 > h3, .toggle > .col-12 > p {
  background-color: rgb(60, 24, 24);
  color: rgb(254, 234, 163);
  font-size: 1.5em;
}
#food table, #drinks table {
  border-collapse: collapse;
  table-layout: auto;
  width: auto;
  font-size: 0.6em;
  empty-cells: hide;
}
.shademe {
  background-color: #9975a5;
}
.footer {
  /*background-image: url("../images/agave don mexcalito 329x284.png");*/
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 60px;
}
.promo {}
.aside {
  /* background-color: #A43136;
  padding: 15px;*/
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}
.footer {
  /*background-color: #315F5f;*/
  background-color: rgb(78, 183, 178);
  color: rgb(254, 234, 163);
  text-align: center;
  /*padding: 15px;*/
  overflow: auto;
  font-size: .8em;
}
.toggle {
  /*display: none;*/
}
.hideMe {
  display: none;
}
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
.col-3 .socials {
  max-width: 25%;
}
.socials img {
  max-width: 60px;
  display: block;
}
.socials a {
  background-color: #FFF;
  display: block;
  border-radius: 10px;
  max-width: 60px;
}
.socials a:hover {
  background-color: #EFB447;
}
.music {
  /*background-color: #4672A0;*/
  border-bottom: 1px solid #315F5f;
  /*border-right: 1px solid white;*/
}
.music img {
  box-shadow: 2px 2px 20px rgb(78, 183, 178)
}
.row {
  /*background-color: azure;*/
}
p {
  margin: 10px 0 10px;
}
@media only screen and (min-width: 100px) {
  /* For mobiles? */
  .col-s-0 {
    display: none;
  }
  .col-s-1 {
    width: 8.33%;
  }
  .col-s-2 {
    width: 16.66%;
  }
  .col-s-3 {
    width: 25%;
  }
  .col-s-4 {
    width: 33.33%;
  }
  .col-s-5 {
    width: 41.66%;
  }
  .col-s-6 {
    width: 50%;
  }
  .col-s-7 {
    width: 58.33%;
  }
  .col-s-8 {
    width: 66.66%;
  }
  .col-s-9 {
    width: 75%;
  }
  .col-s-10 {
    width: 83.33%;
  }
  .col-s-11 {
    width: 91.66%;
  }
  .col-s-12 {
    width: 100%;
  }
  [class*="col-"] {
    padding: 5px;
  }
  .header {
    font-size: 0.9em;
    background-color: rgb(60, 24, 24);
  }
  img {
    width: 100%;
  }
}
@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {
    width: 8.33%;
  }
  .col-s-2 {
    width: 16.66%;
  }
  .col-s-3 {
    width: 25%;
  }
  .col-s-4 {
    width: 33.33%;
  }
  .col-s-5 {
    width: 41.66%;
  }
  .col-s-6 {
    width: 50%;
  }
  .col-s-7 {
    width: 58.33%;
  }
  .col-s-8 {
    width: 66.66%;
  }
  .col-s-9 {
    width: 75%;
  }
  .col-s-10 {
    width: 83.33%;
  }
  .col-s-11 {
    width: 91.66%;
  }
  .col-s-12 {
    width: 100%;
  }
  [class*="col-"] {
    padding: 10px;
  }
  .header {
    font-size: 0.9em;
  }
  img {
    max-width: 80%;
  }
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  body {
    margin: auto;
    max-width: 99%;
  }
  #mainContent {
    /*max-width: 80%;*/
    float: none;
    margin: auto;
    min-height: 615px;
  }
  .col-0 {
    display: none;
  }
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
  [class*="col-"] {
    padding: 5px 10px;
  }
  #logoPlaceholder img {
    /*max-width: 181px;*/
  }
  .header {
    font-size: 1.3em;
  }
  #food table, #drinks table {
    font-size: 0.8em;
  }
}