@font-face {
    src: url(font/pauraque.ttf);
    /*flurymuffin
    bonaro-rough ma c'è anche regular su internet
    bluefine.ttf
    */
    font-family: logo;
}

@font-face {
    src: url(font/Korinna-Agency.otf);
    /*flurymuffin
    bonaro.rough ma c'è anche regular su internet
    bluefine.ttf
    */
    font-family: accatre;
}

@font-face {
    src: url(font/Berolina.ttf);
    /*flurymuffin
    bonaro.rough ma c'è anche regular su internet
    bluefine.ttf
    */
    font-family: sotto;
}

@font-face {
    src: url(font/EkMukta.ttf);
    /*
    euphemia
    euphemiabold
    junction.otf
    ekmukta
    */
    font-family: testo;
}



html {
    height: 100vh;
width: 100vw;
}

body {
    background-image: url(immagini/barsfondo1.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: testo;
    margin:0;
    padding:0;
    overflow:auto;
    height: 100vh;
width: 100vw;
    background-size:100% 100%;
}

.table {
    position: absolute;
    bottom: 0;
    margin: auto;
  left: 0;
  right: 0;
    width: 1500px;
    z-index: 1;
}

#drink {
    width: 200px;
    position: absolute;
    left: 350px;
    top: 200px;
    z-index: 2;
}

.sotto {
    font-family: sotto;
    z-index: 2;
    position: absolute;
    top: 550px;
    left: 370px;
    font-size: xxx-large;
    color: white;
    text-shadow: 5px 5px 10px black,
     0 0 20px black,
      0 0 25px black,
          0 0 50px black;
}

.piattino {
    width: 200px;
    position: absolute;
    top: 440px;
    right: 300px;
    z-index: 2;
}

.sotto2 {
    font-family: sotto;
    z-index: 2;
    position: absolute;
    top: 550px;
    right: 380px;
    font-size: xxx-large;
    color: white;
    text-shadow: 5px 5px 10px black,
     0 0 20px black,
      0 0 25px black,
          0 0 50px black;
}


.bg {
    width: 450px;
    position: absolute;
    top: 60px;
    margin: auto;
  left: 0;
  right: 0;
    z-index: 2;
    border-radius: 20px;
}

.testo {
    text-align: center;
    width: 380px;
    height: 510px;
    overflow-y: scroll;
    position: absolute;
    top: 100px;
    margin: auto;
  left: 0;
  right: 0;
    z-index: 3;
    border-radius: 20px;
}

h1 {
    font-family: logo;
    color: #79553d;
    font-size: xxx-large;
}

h3 {
    font-family: accatre;
    color: #79553d;
}

.coso {
    width: 250px;
    border-color: #936e5b;
    margin-top: -10px;
    margin-bottom: 10px;
}

#swapper-first {
    display: none;
    text-align: left;
    /*display: block;*/
}

#swapper-other {
    display: none;
}

.products50 {
    width: 50px;
    float: left;
     margin-right: 5px;
}

.products100 {
    width: 100px;
    float: left;
     margin-right: 5px;
}


.nobuy {
    background-color: mediumseagreen;
    border-radius: 5px;
    color: #f8f1df;
    font-family: accatre;
    margin-right:5px;
}

.purchase {
    background-color: #ed872d;
    border-radius: 5px;
    color: #f8f1df;
    font-family: accatre;
     margin-right:5px;
}

.look {
    background-color: #cb410b;
    border-radius: 5px;
    color: #f8f1df;
    font-family: accatre;
     margin-right:5px;
}

.cosino {
    width: 250px;
}








@media screen and (max-width: 1300px) {
.table {
    width: 1230px;
}

#drink {
    width: 200px;
    left: 200px;
    top: 330px;
}

.sotto {
    top: 680px;
    left: 250px;
}

.piattino {
    width: 180px;
    top: 560px;
    right: 200px;
}

.sotto2 {
    top: 650px;
    right: 280px;
}


.bg {
    width: 430px;
   /* top: 130px; */
    border-radius: 20px;
}

.testo {
    width: 360px;
    height: 510px;
    /* top: 170px; */
    border-radius: 20px;
}
}



@media screen and (min-width: 1301px) and (max-width: 1400px) {
.table {
    width: 1295px;
}

#drink {
    width: 200px;
    left: 200px;
   /* top: 330px; */
}

.sotto {
   /* top: 680px; */
    left: 250px;
}

.piattino {
    width: 180px;
   /* top: 560px; */
    right: 200px;
}

.sotto2 {
   /* top: 650px; */
    right: 280px;
}


.bg {
    width: 450px;
   /* top: 130px; */
    border-radius: 20px;
}

.testo {
    width: 380px;
    height: 510px;
   /* top: 170px; */
    border-radius: 20px;
}
}





@media screen and (min-width: 1401px) and (max-width: 1500px) {
.table {
    width: 1395px;
}

#drink {
    width: 200px;
    left: 280px;
   /* top: 400px; */
}

.sotto {
  /*  top: 760px; */
    left: 320px;
}

.piattino {
    width: 200px;
   /* top: 640px; */
    right: 260px;
}

.sotto2 {
  /*  top: 750px; */
    right: 340px;
}


.bg {
    width: 450px;
  /* top: 150px; */
    border-radius: 20px;
}

.testo {
    width: 380px;
    height: 510px;
   /* top: 200px; */
    border-radius: 20px;
}
}



@media screen and (min-width: 1701px) and (max-width: 1800px) {
.table {
    width: 1595px;
}

#drink {
    width: 220px;
    left: 310px;
   /* top: 400px; */
}

.sotto {
  /*  top: 760px; */
    left: 370px;
}

.piattino {
    width: 220px;
   /* top: 640px; */
    right: 310px;
}

.sotto2 {
  /*  top: 750px; */
    right: 390px;
}


.bg {
    width: 480px;
  /* top: 150px; */
    border-radius: 20px;
}

.testo {
    width: 400px;
    height: 540px;
   /* top: 200px; */
    border-radius: 20px;
}
}




@media screen and (min-width: 1801px) and (max-width: 1900px) {
.table {
    width: 1595px;
}

#drink {
    width: 230px;
    left: 360px;
   /* top: 400px; */
}

.sotto {
  /*  top: 760px; */
    left: 420px;
}

.piattino {
    width: 230px;
   /* top: 640px; */
    right: 340px;
}

.sotto2 {
  /*  top: 750px; */
    right: 420px;
}


.bg {
    width: 490px;
  /* top: 150px; */
    border-radius: 20px;
}

.testo {
    width: 410px;
    height: 550px;
   /* top: 200px; */
    border-radius: 20px;
}
}





@media screen and (min-width: 1901px)  {
.table {
    width: 1595px;
}

#drink {
    width: 240px;
    left: 415px;
   /* top: 400px; */
}

.sotto {
  /*  top: 760px; */
    left: 490px;
}

.piattino {
    width: 250px;
   /* top: 640px; */
    right: 380px;
}

.sotto2 {
  /*  top: 750px; */
    right: 470px;
}


.bg {
    width: 500px;
  /* top: 150px; */
    border-radius: 20px;
}

.testo {
    width: 420px;
    height: 560px;
   /* top: 200px; */
    border-radius: 20px;
}
}




















@media screen and (max-height: 700px) {

#drink {
    top: 190px;
}

.sotto {
    top: 570px;
}

.piattino {
    top: 440px;
}

.sotto2 {
    top: 530px;
}


.bg {
    top: 130px;
}

.testo {
    top: 170px;
}
}









@media screen and (min-height: 760px) and (max-height: 890px) {

#drink {
    top: 290px;
}

.sotto {
    top: 670px;
}

.piattino {
    top: 540px;
}

.sotto2 {
    top: 630px;
}


.bg {
    top: 130px;
}

.testo {
    top: 170px;
}
}






@media screen and (min-height: 891px) and (max-height: 960px) {

#drink {
    top: 360px;
}

.sotto {
   top: 690px;
}

.piattino {
    top: 630px;
}

.sotto2 {
    top: 740px;
}
    .bg {
    top: 170px;
}

.testo {
    top: 220px;
}
}








@media screen and (min-height: 961px) and (max-height: 1049px) {

#drink {
    top: 440px;
}

.sotto {
   top: 800px;
}

.piattino {
    top: 710px;
}

.sotto2 {
    top: 830px;
}
    .bg {
    top: 230px;
}

.testo {
    top: 280px;
}
}






@media screen and (min-height: 1050px) and (max-height: 1100px) {

#drink {
    top: 520px;
}

.sotto {
   top: 890px;
}

.piattino {
    top: 780px;
}

.sotto2 {
    top: 890px;
}
    .bg {
    top: 280px;
}

.testo {
    top: 330px;
}
}





@media screen and (min-height: 1101px) and (max-height: 1150px) {

#drink {
    top: 580px;
}

.sotto {
   top: 950px;
}

.piattino {
    top: 870px;
}

.sotto2 {
    top: 970px;
}
    .bg {
    top: 330px;
}

.testo {
    top: 380px;
}
}






@media screen and (min-height: 1151px) and (max-height: 1200px) {

#drink {
    top: 620px;
}

.sotto {
   top: 980px;
}

.piattino {
    top: 900px;
}

.sotto2 {
    top: 1020px;
}
    .bg {
    top: 380px;
}

.testo {
    top: 430px;
}
}








@media screen and (min-height: 1201px) {

#drink {
    top: 680px;
}

.sotto {
   top: 1050px;
}

.piattino {
    top: 970px;
}

.sotto2 {
    top: 1100px;
}
    .bg {
    top: 390px;
}

.testo {
    top: 450px;
}
}