@font-face {
  font-family: 'MyWebFont';
  src: url('../fonts/logo.ttf')  format('truetype'); /* Safari, Android, iOS */
}

body {
  margin:0;
}

#pedidoText{
    max-height: 500px !important;
    overflow: scroll;
}

.imagenHelado{
    width: 30%;
    margin-top: 20px;
    margin-bottom: 10px;
}

.toast{
  margin-top: 30px !important;
  /*max-width: 500px !important;*/
  max-width: 100% !important;
}

.indexCliente{
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.jq-toast-wrap,.jq-toast-wrap *{margin:0;padding:0}.jq-toast-wrap{display:block;position:fixed;width:350px;pointer-events:none!important;letter-spacing:normal;z-index:9000!important}.jq-toast-wrap.bottom-left{bottom:20px;left:20px}.jq-toast-wrap.bottom-right{bottom:20px;right:40px}.jq-toast-wrap.top-left{top:20px;left:20px}.jq-toast-wrap.top-right{top:20px;right:40px}.jq-toast-single{display:block;width:100%;padding:10px;margin:0 0 5px;border-radius:4px;font-size:12px;font-family:arial,sans-serif;line-height:17px;position:relative;pointer-events:all!important;background-color:#444;color:#fff}.jq-toast-single h2{font-family:arial,sans-serif;font-size:14px;margin:0 0 7px;background:0 0;color:inherit;line-height:inherit;letter-spacing:normal}.jq-toast-single a{color:#eee;text-decoration:none;font-weight:700;border-bottom:1px solid #fff;padding-bottom:3px;font-size:12px}.jq-toast-single ul{margin:0 0 0 15px;background:0 0;padding:0}.jq-toast-single ul li{list-style-type:disc!important;line-height:17px;background:0 0;margin:0;padding:0;letter-spacing:normal}.close-jq-toast-single{position:absolute;top:3px;right:7px;font-size:14px;cursor:pointer}.jq-toast-loader{display:block;position:absolute;top:-2px;height:5px;width:0;left:0;border-radius:5px;background:red}.jq-toast-loaded{width:100%}.jq-has-icon{padding:10px 10px 10px 50px;background-repeat:no-repeat;background-position:10px}.jq-icon-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);background-color:#31708f;color:#d9edf7;border-color:#bce8f1}.jq-icon-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=);background-color:#8a6d3b;color:#fcf8e3;border-color:#faebcc}.jq-icon-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=);background-color:#a94442;color:#f2dede;border-color:#ebccd1}.jq-icon-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==);color:#dff0d8;background-color:#3c763d;border-color:#d6e9c6}

.jq-toast-wrap{
  left: calc(50% - 175px) !important;
}

.jq-toast-single{
  box-shadow: rgba(0, 0, 0, 0.75) 1px 1px 5px 1px;
}

.blue-blackgorund-test{
    background-color: #C8EBFB !important;
}

.blur-filter {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}


#solicitudesRealizadas{
  max-width: 300px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 25px;
}

#error {
  position: fixed;
  top: 50%;
  left: calc(50% - 125px);
  transform: translate(-50%, -35%);
  background: #FF5252;
}
#success {
  position: fixed;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -45%);
  background: #66BB6A;

}
#info {
  position: fixed;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -55%);
  background: #29B6F6;
}
#warning {
  position: fixed;
  top: 50%;
  left: 65%;
  transform: translate(-50%, -65%);
  background: #FFAB40;
}

#error:hover {
  background: #D32F2F;
  box-shadow: 0 5px 5px rgba(0,0,0, 0.5);
}
#success:hover {
  background: #00C853;
  box-shadow: 0 5px 5px rgba(0,0,0, 0.5);
}
#info:hover {
  background:#0a9fe2;
  box-shadow: 0 5px 5px rgba(0,0,0, 0.5);
}
#warning:hover {
  background: #ff950d;
  box-shadow: 0 5px 5px rgba(0,0,0, 0.5);
}


#dashBoard .card{
  box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15) !important;
  text-align: center;
}

input:read-only{
  background-color: #eee !important;
}

#tableProductos .table th, .table td {
  padding: 0.50rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

#tableAlargenos .table th, .table td {
  padding: 0.50rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

#tableMesas .table th, .table td {
  padding: 0.50rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.grid-item{
	height: 60px;
}

.grid > .grid-item {
	width: 20%;
	padding: 5px;
}



.shadowBox {
  box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.25);
}

.headerBox {
  border-left: 1px solid rgba(0,0,0,.125);
  border-right: 1px solid rgba(0,0,0,.125);
  border-top: 1px solid rgba(0,0,0,.125);
  padding: 5px;
  border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
  background-color: #0b3b6f !important;
}

.headerBox h5 {
  text-align: left;
  position: relative;
  left: 10px;
  top: 5px;
  color: #fff;
}

.bodyBox {
  border: 1px solid rgba(0,0,0,.125);
  padding: 10px;
  border-radius: 0 0 0.25rem 0.25rem;
  background-color: #fff;
}



#datepicker input:read-only{
  background-color: #fff;;
}

@media (max-width: 570px) {




	.grid > .grid-item {
		width: 20%;
		padding: 2px;
  }

  .card-header{
    font-size: 14px;
    /*padding: 0.95rem 0.25rem !important;*/
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    min-height: 50px;
  }
  #cerrarSesion{
    width: 100%;
  }
}


li {list-style:none;}

.list-group-item{
  z-index: 999;
}

/*li .text-muted{
  color: #17508e !important
}*/

::-webkit-scrollbar {display: none;}

.imgTest{
  margin-right: 10px;
}
.paddingAlargenos{
  padding: 5px;
  margin-top: 5px;
}

.azul{
  color: #17508e !important;
}

.test{
  width: 65%;
  margin: 0 auto;
}

#background-wrap {
  bottom: 0;
left: 0;
/*position: fixed;*/
right: 0;
top: 0;
/*z-index: -1;*/
}

/* KEYFRAMES */

@-webkit-keyframes animateBubble {
  0% {
      margin-top: 1000px;
  }
  100% {
      margin-top: -100%;
  }
}

@-moz-keyframes animateBubble {
  0% {
      margin-top: 1000px;
  }
  100% {
      margin-top: -100%;
  }
}

@keyframes animateBubble {
  0% {
      margin-top: 1000px;
  }
  100% {
      margin-top: -100%;
  }
}

@-webkit-keyframes sideWays {
  0% {
      margin-left:0px;
  }
  100% {
      margin-left:50px;
  }
}

@-moz-keyframes sideWays {
  0% {
      margin-left:0px;
  }
  100% {
      margin-left:50px;
  }
}

@keyframes sideWays {
  0% {
      margin-left:0px;
  }
  100% {
      margin-left:50px;
  }
}

/* ANIMATIONS */

.x1 {
  -webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: -5%;
top: 5%;

-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}

.x2 {
  -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;

left: 5%;
top: 80%;

-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}

.x3 {
  -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 10%;
top: 40%;

-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7);
}

.x4 {
  -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;

left: 20%;
top: 0;

-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}

.x5 {
  -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;

left: 30%;
top: 50%;

-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
}

.x6 {
  -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 50%;
top: 0;

-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}

.x7 {
  -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 65%;
top: 70%;

-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}

.x8 {
  -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;

left: 80%;
top: 10%;

-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}

.x9 {
  -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;

left: 90%;
top: 50%;

-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}

.x10 {
  -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 80%;
top: 80%;

-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}

/* OBJECTS */

.bubble {
  -webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);

  height: 200px;
position: absolute;
width: 200px;
}

.bubble:after {
  background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* IE10+ */
  background: radial-gradient(ellipse at center,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

  -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);

content: "";
  height: 180px;
left: 10px;
position: absolute;
width: 180px;
}

h1 {
  /*font-family: 'Lato', sans-serif;*/
  font-family: 'MyWebFont';
  font-weight:300;
  letter-spacing: 2px;
  font-size:48px;
  line-height: 0.8;
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

h4 .text-muted  i:before, h4 .text-muted  i:after {
  transition: all 0.25s ease-in-out;
}

.text-muted i {
  animation: flipdown 0.5s ease both;
}

h4 .text-muted i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 10px;
  /*right: 0;*/
}
h4 .text-muted  i:before, h4 .text-muted  i:after {
  content: "";
  position: absolute;
  background-color: #17508e;
  width: 3px;
  height: 9px;
}
h4 .text-muted  i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
h4 .text-muted  i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
h4 .text-muted  input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 15;
  opacity: 0;
}
h4 .text-muted  input[type=checkbox]:checked ~ p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
h4 .text-muted input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
h4 .text-muted  input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}




.pointer  a:before {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  float: left;
  transition: all 0.5s;
  margin-right: 10px;
}
.pointer.active a:before {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 transform: rotate(180deg);
}

p {
  font-family: 'Lato', sans-serif;
  letter-spacing: 1px;
  font-size:14px;
  color: #333333;
}

.header {
  position:relative;
  text-align:center;
  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);

  color:white;
}
footer {
  position:relative;
  text-align:center;
  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);

  color:white;
}
.logo {
  width:50px;
  fill:white;
  padding-right:15px;
  display:inline-block;
  vertical-align: middle;
}

.inner-header {
  height:30vh;
  width:100%;
  margin: 0;
  padding: 0;
}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
  /*transform: rotate(180deg);*/
}

.reverse{
  transform: rotate(180deg);
  margin-top: -2px;
}

.content {
  position:relative;
  /*height:20vh;*/
  text-align:center;
  /*background-color: white;*/
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

#cerveza{
  transform: rotate(20deg) scale(0.7);
}

.beer-animation-wrapper {
  position: relative;
  /*overflow-y: hidden;*/
  overflow: visible;
  /*padding: 34px;*/
  padding-right: 0;
  z-index: 99;
}
.beer-animation-wrapper .beer {
  position: relative;
  height: 200px;
  width: 150px;
  min-width: 150px;
  margin-top: 64px;
  margin-right: 55px;
  margin-left: 18px;
  z-index: -2;
  background-image: radial-gradient(130px 30px at 50% 103%, #f1ecdb 40%, transparent 40%), -webkit-gradient(linear, left top, right top, color-stop(50%, #ffc200), color-stop(50%, #fdac10));
  background-image: radial-gradient(130px 30px at 50% 103%, #f1ecdb 40%, transparent 40%), linear-gradient(to right, #ffc200 50%, #fdac10 50%);
  border-radius: 0 0 15% 15%;
  /*mug*/
  border: 12px solid #f1ecdb;
  box-sizing: border-box;
}
.beer-animation-wrapper .beer:before {
  content: '';
  position: absolute;
  height: 130%;
  width: 100%;
  right: 0;
  bottom: -5%;
  z-index: -1;
  opacity: 1;
  -webkit-animation: 3s bubbles linear infinite;
          animation: 3s bubbles linear infinite;
  background: radial-gradient(12px 12px at 25% 85%, #ffda66 80%, transparent 80%), radial-gradient(8px 8px at 70% 45%, #fecf75 80%, transparent 80%), radial-gradient(10px 10px at 35% 40%, #fecf75 80%, transparent 80%), radial-gradient(6px 6px at 80% 30%, #fecf75 80%, transparent 80%), radial-gradient(8px 8px at 60% 81%, #fecf75 80%, transparent 80%), radial-gradient(6px 6px at 89% 89%, #fecf75 80%, transparent 80%), radial-gradient(10px 10px at 77% 78%, #fecf75 80%, transparent 80%), radial-gradient(6px 6px at 40% 57%, #ffda66 80%, transparent 80%), radial-gradient(4px 4px at 30% 67%, #ffda66 80%, transparent 80%), radial-gradient(4px 4px at 30% 17%, #ffda66 80%, transparent 80%), radial-gradient(6px 6px at 40% 10%, #ffda66 80%, transparent 80%), radial-gradient(10px 10px at 62% 24%, #ffda66 80%, transparent 80%), radial-gradient(8px 8px at 18% 31%, #ffda66 80%, transparent 80%), radial-gradient(12px 12px at 83% 60%, #ffda66 80%, transparent 80%);
}
.beer-animation-wrapper .beer:after {
  /*mug handle*/
  content: '';
  position: absolute;
  border-radius: 0 50% 50% 0;
  height: 100px;
  width: 66px;
  top: 30px;
  right: -66px;
  background-color: transparent;
  box-sizing: border-box;
  border: 16px solid #f1ecdb;
  border-left: 12px solid #f1ecdb;
}
.beer-animation-wrapper .foam {
  position: relative;
  top: -20%;
  left: 63%;
  height: 20px;
  width: 20px;
  background: #fffef8;
  border-radius: 34px;
  box-shadow: -70px 56px 0 -3px #ffe799, -70px 58px 0 -3px #ffe799, -70px 60px 0 -3px #ffe799, -70px 62px 0 -3px #ffe799, -70px 64px 0 -3px #ffe799, -70px 66px 0 -3px #ffe799, -70px 68px 0 -3px #ffe799, -70px 70px 0 -3px #ffe799, -70px 72px 0 -3px #ffe799, -70px 74px 0 -3px #ffe799, -70px 76px 0 -3px #ffe799, -70px 78px 0 -3px #ffe799, -70px 80px 0 -3px #ffe799, -70px 82px 0 -3px #ffe799, -70px 84px 0 -3px #ffe799, -70px 86px 0 -3px #ffe799, -70px 88px 0 -3px #ffe799, -70px 90px 0 -3px #ffe799, -70px 92px 0 -3px #ffe799, -70px 94px 0 -3px #ffe799, -70px 96px 0 -3px #ffe799, -70px 98px 0 -3px #ffe799, -70px 100px 0 -3px #ffe799, -70px 102px 0 -3px #ffe799, -70px 104px 0 -3px #ffe799, -70px 106px 0 -3px #ffe799, -70px 108px 0 -3px #ffe799, -70px 110px 0 -3px #ffe799, -70px 112px 0 -3px #ffe799, -70px 114px 0 -3px #ffe799, -70px 116px 0 -3px #ffe799, -70px 118px 0 -3px #ffe799, -70px 120px 0 -3px #ffe799, -70px 122px 0 -3px #ffe799, -70px 124px 0 -3px #ffe799, -70px 126px 0 -3px #ffe799, -70px 128px 0 -3px #ffe799, -70px 130px 0 -3px #ffe799, -70px 132px 0 -3px #ffe799, -70px 134px 0 -3px #ffe799, -70px 136px 0 -3px #ffe799, -70px 138px 0 -3px #ffe799, -70px 140px 0 -3px #ffe799, -70px 142px 0 -3px #ffe799, -70px 144px 0 -3px #ffe799, -70px 146px 0 -3px #ffe799, 0 22px 0 14px #fff9de, 0 14px 0 14px #fffef8, -54px 14px 0 8px #fff9de, -78px 12px 0 12px #fffef8, -36px 24px 0 8px #fff9de, -100px 16px 0 8px #fff9de, -30px 0 0 12px #fffef8, 28px 14px 0 12px #fffef8, -64px -16px 0 10px #fffef8, -36px -28px 0 10px #fff9de, -10px -14px 0 10px #fff9de, 14px -10px 0 2px #fffef8, 18px -14px 0 2px #fff9de, 50px 14px 0 2px #fff9de;
}
.beer-animation-wrapper .foam:before, .beer-animation-wrapper .foam:after {
  z-index: -1;
  content: '';
  position: absolute;
  top: 200%;
  width: 20px;
  border-radius: 34px;
  background: #fff9de;
  background: -webkit-gradient(linear, left top, right top, color-stop(75%, #fff9de), color-stop(75%, #fffef8));
  background: linear-gradient(to right, #fff9de 75%, #fffef8 75%);
}
.beer-animation-wrapper .foam:after {
  left: 100%;
  height: 0px;
  -webkit-animation: drip1 2s ease-out forwards;
          animation: drip1 2s ease-out forwards;
}
.beer-animation-wrapper .foam:before {
  right: 25%;
  height: 0px;
  -webkit-animation: drip2 5s ease-out forwards;
          animation: drip2 5s ease-out forwards;
}

.bar{
  font-size: 140px !important;
  position: relative;
  top: 35px;
}

.enca{
  font-size: 38px !important;
  position: relative;
  left: 32px;
  top: 12px;
}

.donato{
  font-size: 84px !important;
  position: relative;
  top: -5px;
  left: 18px;
}


h6, h4 {
  text-align: left !important;
}

ul{
  text-align: left !important;
  z-index: 9995;
}

ul .text-muted{
  width: 35% !important;
  text-align: right !important;
  z-index: 9995;
}

/*li div{
  line-height: 0.7 !important;
  z-index: 9995;
}*/

@-webkit-keyframes drip2 {
  0% {
    height: 0px;
  }
  50% {
    height: 60px;
  }
  75% {
    height: 60px;
  }
  80% {
    height: 60px;
  }
  100% {
    height: 70px;
  }
}

@keyframes drip2 {
  0% {
    height: 0px;
  }
  50% {
    height: 60px;
  }
  75% {
    height: 60px;
  }
  80% {
    height: 60px;
  }
  100% {
    height: 70px;
  }
}
@-webkit-keyframes drip1 {
  0% {
    height: 0px;
  }
  100% {
    height: 100px;
  }
}
@keyframes drip1 {
  0% {
    height: 0px;
  }
  100% {
    height: 100px;
  }
}
@-webkit-keyframes bubbles {
  0% {
    -webkit-transform: translatey(0%);
            transform: translatey(0%);
  }
  99% {
    -webkit-transform: translatey(-50%);
            transform: translatey(-50%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes bubbles {
  0% {
    -webkit-transform: translatey(0%);
            transform: translatey(0%);
  }
  99% {
    -webkit-transform: translatey(-50%);
            transform: translatey(-50%);
  }
  100% {
    opacity: 0;
  }
}

@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% {
    transform: translate3d(85px,0,0);
  }
}

@media (max-width: 1200px) {
  .test{
    width: 65%;
  }
  .paddingAlargenos{
    padding: 10px;
    margin-top: 10px;
  }
}

@media (max-width: 991px) {




  .test{
    width: 100%;
  }
  .paddingAlargenos{
    padding: 5px;
    margin-top: 5px;
  }
  .card-header {
    font-size: 14px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    min-height: 50px;
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {

    ul .text-muted{
        width: 60% !important;
        text-align: right !important;
        z-index: 9995;
    }

    .imagenHelado{
        width: 90%;
        height: auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .imgTest{
    margin-bottom: 15px;
    margin-right: 0px;
  }
  #cerveza{
    transform: rotate(20deg) scale(0.5);
  }
  .waves {
    height:40px;
    min-height:40px;
  }
  /*.content {
    height:30vh;
  }*/
  .card-header {
    font-size: 14px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    min-height: 50px;
  }
  h1{
    position: relative;
    left: -65px;
  }

  .bar{
    font-size: 70px !important;
    position: relative;
    top: 28px;
  }

  .enca{
    font-size: 30px !important;
    position: relative;
    left: 30px;
    top: 7px;
  }

  .donato{
    font-size: 60px !important;
    position: relative;
    top: -5px;
    left: 18px;
  }


}