@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;
*/
html {
  font-family: Copperplate;
  font-size: 1.4em;
  /*background-color: #efeaff;*/
}
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-family: Gurmukhi MT;
  font-size: .7em;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
* {
  box-sizing: border-box;
  word-break: break-word;
}
ul {
  list-style-type: none;
}
ul.manual {
  list-style-type: disc;
  list-style-position: inside;
  text-align: justify;
  padding: 30px;
  min-height: 120px;
}
.uploadForm input[id='editTitle'], .uploadForm textarea[id='editDescription'] {
  width: 100%;
}
.inputTable {
  background-color: #FFFFFF;
}
.mainRow {
  background-color: #FFF;
}
a:any-link {
  color: rgb(95, 159, 249);
}
.member > a {
  background-color: black;
}
.row::after, .mainRow::after {
  content: "";
  clear: both;
  display: table;
}
[class*="col-"] {
  /*float: left;*/
  padding: 0px;
  display: inline-block;
  vertical-align: top;
}
.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;
}
.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;
}
.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.1em;
}
#food table, #drinks table {
  border-collapse: collapse;
  table-layout: auto;
  width: auto;
  font-size: 0.6em;
  empty-cells: hide;
}
.shademe {
  background-color: #4a95d0;
  color: #FFF;
  /*background-color: rgb(95, 159, 249);*/
}
.featureme {
  /*background-color: #000;*/
  background-color: rgb(10, 70, 124);
}
.col-5 > .shademe {
  min-height: 62px;
  text-align: justify;
  padding: 15px 14px;
}
.footer {
  /*  background-image: url("../images/agave don mexcalito 329x284.png");
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 60px;*/
}
.promo {}
input[type="file"]::file-selector-button {
  font-family: Copperplate;
  background-color: #000;
  color: rgb(95, 159, 249);
  transition: 1s;
  background: #000;
  -webkit-border-radius: 7;
  -moz-border-radius: 7;
  border-radius: 7px;
  padding: 3px 10px;
  cursor: pointer;
  display: inline-block;
  margin: 0px 1px 0px 0px;
  vertical-align: top;
  text-align: center;
  text-decoration: none;
  padding: 12px;
  margin: 5px 0 0 0;
}
input[type="file"]::file-selector-button:hover {
  /*background-color: #81ecec;
  border: 2px solid #00cec9;*/
  color: grey;
}
.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;*/
  text-align: justify;
}
#recordP {
  text-align: center;
}
ul.manual > li > p {
  display: none;
}
.pids-wrapper {
  width: 100%;
}
.leftpid, .rightpid {
  width: calc(4%);
  height: 10px;
  display: inline-block;
  margin: 5px;
}
#recordButton {
  width: 100px;
  height: 100px;
  font-size: 0;
  background-color: red;
  border: 0;
  border-radius: 50px;
  margin: 18px;
  outline: none;
}
.notRec {
  background-color: darkred;
}
.Rec {
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes pulse {
  0% {
    box-shadow: 0px 0px 5px 0px rgba(173, 0, 0, .3);
  }
  65% {
    box-shadow: 0px 0px 5px 13px rgba(173, 0, 0, .3);
  }
  90% {
    box-shadow: 0px 0px 5px 13px rgba(173, 0, 0, 0);
  }
}
.collapsible {
  /*background-color: #777;
  /*color: white;*/
  color: rgb(95, 159, 249);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  font-size: 15px;
  background: #000;
  -webkit-border-radius: 7;
  -moz-border-radius: 7;
  border-radius: 7px;
}
.active, .collapsible:hover {
  /*background-color: #555;*/
  color: black;
  background-color: #ddd;
}
.content {
  padding: 0 18px;
  /*display: none;
  visibility: hidden;*/
  overflow: hidden;
  background-color: #f1f1f1;
}
@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%;
  }
  #audioMix {
    font-size: 1.2em;
  }
}
@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: 70%;*/
  }
  #audioMix {
    /*font-size: 1.7em;*/
  }
}
@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: 49.7%;
  }
  .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: 12px 15px;
  }
  #logoPlaceholder img {
    /*max-width: 181px;*/
  }
  .header {
    font-size: 1.3em;
  }
  #food table, #drinks table {
    font-size: 0.8em;
  }
}