@CHARSET "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Audiowide&display=swap');

@font-face {
  font-family: 'Audiowide';
  src: url('../fonts/audiowide.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.appetit-title {
  font-family: 'Audiowide', 'Arial', cursive;
  font-size: large;
  font-weight: bold;
  font-style: normal;
  color: white;
  text-shadow: 3px 3px 6px gray;
}

.appetit-text {
  font-family: 'Audiowide', 'Arial', cursive;
  font-style: normal;
}

.font-audiowide {
  font-family: -Audiowide, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif;
}

.appetit-bg {
  background-image: url('../images/appetit__back2.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.text-mobile-normal {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif;
  font-size: small;            /*  xx-small ; x-small ; small ; medium ; large ; x-large ; xx-large  */
  font-weight: normal;
}

.text-mobile-small {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif;
  font-size: x-small;            /*  xx-small ; x-small ; small ; medium ; large ; x-large ; xx-large  */
  font-weight: normal;
}

.text-mobile-light {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif;
  font-size: xx-small;            /*  xx-small ; x-small ; small ; medium ; large ; x-large ; xx-large  */
  font-weight: normal;
}

.text-mobile {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif;
  font-size: xx-small;            /*  xx-small ; x-small ; small ; medium ; large ; x-large ; xx-large  */
  font-weight: bold;
}

.upcase input {
  text-transform: uppercase;
  &::placeholder {  /* Recent browsers */
    text-transform: none;
  }
  &:-moz-placeholder {  /* Mozilla Firefox 4 to 18 */
    text-transform: none;
  }
  &::-moz-placeholder {  /* Mozilla Firefox 19+ */
    text-transform: none;
  }
  &::-webkit-input-placeholder {  /* WebKit browsers */
    text-transform: none;
  }
}

p {
    font-family:Arial, Helvetica, sans-serif;
}

.image-zoom {
  overflow: hidden;
  margin: 0 auto;
}

.image-zoom img {
  width: 100%;
  transition: 0.2s all ease-in-out;
}

.image-zoom:hover img {
  transform: scale(1.5);
}

.zoom {
  transition: transform .2s;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.2);
}

.zoom2 {
  transition: transform .2s;
  margin: 0 auto;
}

.zoom2:hover {
  transform: scale(1.4);
}

.superavatar {
  vertical-align: middle;
  width: 64px;
  height: 64px;
  border-radius: 30%;
  border-width: 2px 2px 2px 2px;
  border-style: solid;
  border-color: #ffffff;
}

.superavatarnoborder {
  vertical-align: middle;
  width: 64px;
  height: 64px;
}

img.ca35 {
  opacity:0.35;
  -moz-opacity: 0.35;
  filter: alpha(opacity=35);
}

img.ca50 {
  opacity:0.50;
  -moz-opacity: 0.50;
  filter: alpha(opacity=50);
}

img.ca75 {
  opacity:0.75;
  -moz-opacity: 0.75;
  filter: alpha(opacity=75);
}

.whatsapp-float {
  position: fixed;
  width: 64px;
  height: 64px;
  bottom: 20px;
  right: 20px;
  background-image: url('../logos/logo_whatsapp.jpg');
  background-repeat: no-repeat;
  background-size: 64px 64px;
  background-color: #25d366;
  opacity:0.75;
  -moz-opacity: 0.75;
  filter: alpha(opacity=75);
  border-radius: 10px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
}

#my2BotBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 99;
  font-family: Verdana;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 7px;
  border-radius: 4px;
  opacity: 0.50;
  filter: alpha(opacity=50);
  -moz-opacity: 0.50;
}

#my2BotBtn:hover {
  background-color: red;
}

#my2TopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50px;
  z-index: 99;
  font-family: Verdana;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 7px;
  border-radius: 4px;
  opacity: 0.50;
  filter: alpha(opacity=50);
  -moz-opacity: 0.50;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

#my2TopBtn:hover {
  background-color: red;
}